<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" c initial-scale=1.0">
<title>Document</title>
[removed][removed]
<style>
.test {
display: flex;
flex-direction: column;
gap: 2;
width: fit-content;
}
canvas {
margin-top: 20px;
}
</style>
</head>
<body>
[removed]
function writeMessage(context, message){
context.font = "18pt Calibri";
context.fillStyle = "black";
context.fillText(message, 10, 25);
}
window.onload = function(){
events = new Events("myCanvas");
var canvas = events.getCanvas();
var context = events.getContext();
var rectX = canvas.width / 2 - 50;
var rectY = canvas.height / 2 - 25;
var draggingRect = false;
var draggingRectOffsetX = 0;
var draggingRectOffsetY = 0;
events.setDrawStage(function(){
// określenie współrzędnych wskaźnika myszy
var mousePos = this.getMousePos();
if (draggingRect) {
rectX = mousePos.x - draggingRectOffsetX;
rectY = mousePos.y - draggingRectOffsetY;
}
// wyczyszczenie płótna
this.clear();
writeMessage(context, "Przeciąganie i upuszczanie prostokąta...");
this.beginRegion();
// rysowanie prostokąta
context.beginPath();
context.rect(rectX, rectY, 100, 50);
context.lineWidth = 4;
context.strokeStyle = "black";
context.fillStyle = "#00D2FF";
context.fill();
context.stroke();
context.closePath();
// dodanie procedur obsługi zdarzeń
this.addRegionEventListener("mousedown", function(){
draggingRect = true;
var mousePos = events.getMousePos();
draggingRectOffsetX = mousePos.x - rectX;
draggingRectOffsetY = mousePos.y - rectY;
});
this.addRegionEventListener("mouseup", function(){
draggingRect = false;
});
this.addRegionEventListener("mouseover", function(){
document.body.style.cursor = "pointer";
});
this.addRegionEventListener("mouseout", function(){
document.body.style.cursor = "default";
});
this.closeRegion();
});
};
[removed]
[removed]
/*
* funkcja wczytuje obrazki, a następnie wywołuje
* po ich pobraniu funkcję zwrotną, przekazując do niej informacje
* o obrazkach
*/
function loadImages(sources, callback){
var loadedImages = 0;
var numImages = 0;
var images = {};
// liczba plików
for (var src in sources) {
numImages++;
}
// pobranie obrazków
for (var src in sources) {
images[src] = new Image();
images[src].onload = function(){
// wywołujemy funkcję zwrotną po pobraniu
// obrazków
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function drawMagnifier(config){
var context = config.context;
var images = config.images;
var mousePos = config.mousePos;
var imageX = config.imageX;
var imageY = config.imageY;
var magWidth = config.magWidth;
var magHeight = config.magHeight;
var smallWidth = config.smallWidth;
var smallHeight = config.smallHeight;
var largeWidth = config.largeWidth;
var largeHeight = config.largeHeight
/*
* Przy określeniu zmiennych sourceX oraz sourceY zakładamy, że prostokąt
* wycinany z dużej wersji obrazka istnieje w nim. Aby można było
* pokazywać fragmenty spoza granic dużego obrazka,
* należałoby w mechanizmie powiększającym wprowadzić pewne zmiany.
*/
var sourceX = ((mousePos.x - imageX) * largeWidth /
smallWidth) - magWidth / 2;
var sourceY = ((mousePos.y - imageY) * largeHeight /
smallHeight) - magHeight / 2;
var destX = mousePos.x - magWidth / 2;
var destY = mousePos.y - magHeight / 2;
var viewWidth = magWidth;
var viewHeight = magHeight;
var viewX = destX;
var viewY = destY;
var drawMagImage = true;
// sprawdzenie krawędzi i modyfikacja,
// gdy mechanizm przekroczy krawędzie dużej wersji obrazka
if (sourceX < 0) {
if (sourceX > -1 * magWidth) {
var diffX = -1 * sourceX;
viewX += diffX;
viewWidth -= diffX;
sourceX = 0;
}
else {
drawMagImage = false;
}
}
if (sourceX > largeWidth - magWidth) {
if (sourceX < largeWidth) {
viewWidth = largeWidth - sourceX;
}
else {
drawMagImage = false;
}
}
if (sourceY < 0) {
if (sourceY > -1 * magHeight) {
var diffY = -1 * sourceY;
viewY += diffY;
viewHeight -= diffY;
sourceY = 0;
}
else {
drawMagImage = false;
}
}
if (sourceY > largeHeight - magHeight) {
if (sourceY < largeHeight) {
viewHeight = largeHeight - sourceY;
}
else {
drawMagImage = false;
}
}
// rysujemy białe tło okienka z powiększeniem
context.beginPath();
context.fill
context.fillRect(destX, destY, magWidth, magHeight);
// rysujemy obrazek
if (drawMagImage) {
context.beginPath();
context.drawImage(images.cobraLargeImg, sourceX, sourceY,
viewWidth, viewHeight, viewX, viewY, viewWidth, viewHeight);
}
// rysujemy krawędź okienka z powiększeniem
context.beginPath();
context.lineWidth = 2;
context.stroke
context.strokeRect(destX, destY, magWidth, magHeight);
}
function drawImages(images){
var events = new Events("myCanvas1");
var canvas = events.getCanvas();
var c
// zależności mechanizmu powiększania
var imageX = canvas.width / 2 - images.cobraSmallImg.width / 2;
var imageY = canvas.height / 2 - images.cobraSmallImg.height / 2;
var magWidth = 200;
var magHeight = 150;
var smallWidth = images.cobraSmallImg.width;
var smallHeight = images.cobraSmallImg.height;
var largeWidth = images.cobraLargeImg.width;
var largeHeight = images.cobraLargeImg.height;
events.setDrawStage(function(){
var mousePos = events.getMousePos();
this.clear();
context.drawImage(images.cobraSmallImg, imageX, imageY,
smallWidth, smallHeight);
// rysujemy prostokąty obszar odpowiadający obrazkowi
context.beginPath();
context.lineWidth = 2;
context.stroke
context.strokeRect(imageX, imageY, smallWidth, smallHeight);
context.closePath();
if (mousePos !== null) {
drawMagnifier({
context: context,
images: images,
mousePos: mousePos,
imageX: imageX,
imageY: imageY,
magWidth: magWidth,
magHeight: magHeight,
smallWidth: smallWidth,
smallHeight: smallHeight,
largeWidth: largeWidth,
largeHeight: largeHeight
});
}
});
canvas.addEventListener("mouseout", function(){
events.drawStage();
}, false);
}
var sources = {
cobraSmallImg: "cobra_800x600.png",
cobraLargeImg: "cobra_280x210.bmp"
};
loadImages(sources, drawImages);
[removed]
</body>
</html>