Untitled

From 312312, 1 Month ago, written in Plain Text.

Embed

Download Paste or View Raw
Hits: 135

<!DOCTYPE html>

<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>

<div class="test">

<canvas id="myCanvas" width="600" height="250" solid black;">

</canvas>

<canvas id="myCanvas1" width="600" height="250" solid black;">

</canvas>

</div>

[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>

Author

Title

Language

Your paste - Paste your paste here

&lt;!DOCTYPE html&gt;
&amp;lt;html lang=&quot;en&quot;&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
    &amp;lt;meta name=&quot;viewport&quot; c initial-scale=1.0&quot;&amp;gt;
    &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;
    [removed][removed]
    &amp;lt;style&amp;gt;
        .test {
            display: flex;
            flex-direction: column;
            gap: 2;
            width: fit-content;
        }

canvas {
            margin-top: 20px;
        }
    &amp;lt;/style&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;

&lt;div class=&quot;test&quot;&gt;
    &lt;canvas id=&quot;myCanvas&quot; width=&quot;600&quot; height=&quot;250&quot;  solid black;&quot;&gt;
    &lt;/canvas&gt;
    &lt;canvas id=&quot;myCanvas1&quot; width=&quot;600&quot; height=&quot;250&quot;  solid black;&quot;&gt;
    &lt;/canvas&gt;
   &lt;/div&gt;

[removed]
 function writeMessage(context, message){
context.font = &quot;18pt Calibri&quot;;
context.fillStyle = &quot;black&quot;;
context.fillText(message, 10, 25);
 }

window.onload = function(){
events = new Events(&quot;myCanvas&quot;); 
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, &quot;Przeciąganie i upuszczanie prostokąta...&quot;);    
this.beginRegion();
// rysowanie prostokąta
context.beginPath();
context.rect(rectX, rectY, 100, 50);
context.lineWidth = 4;
context.strokeStyle = &quot;black&quot;;
context.fillStyle = &quot;#00D2FF&quot;;
context.fill();
context.stroke();
context.closePath();
// dodanie procedur obsługi zdarzeń
this.addRegionEventListener(&quot;mousedown&quot;, function(){
draggingRect = true;
var mousePos = events.getMousePos();
draggingRectOffsetX = mousePos.x - rectX;
draggingRectOffsetY = mousePos.y - rectY;
});
this.addRegionEventListener(&quot;mouseup&quot;, function(){
draggingRect = false;
});

this.addRegionEventListener(&quot;mouseover&quot;, function(){
document.body.style.cursor = &quot;pointer&quot;;
});
this.addRegionEventListener(&quot;mouseout&quot;, function(){
document.body.style.cursor = &quot;default&quot;;
});
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 &gt;= 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 &lt; 0) {
if (sourceX &gt; -1 * magWidth) {
var diffX = -1 * sourceX;
viewX += diffX;
viewWidth -= diffX;
sourceX = 0;
}
else {
drawMagImage = false;
}
}
if (sourceX &gt; largeWidth - magWidth) {
if (sourceX &lt; largeWidth) {
viewWidth = largeWidth - sourceX;
}
else {
drawMagImage = false;
}
}
if (sourceY &lt; 0) {
if (sourceY &gt; -1 * magHeight) {
var diffY = -1 * sourceY;
viewY += diffY;
viewHeight -= diffY;
sourceY = 0;
}
else {
drawMagImage = false;

}
}
if (sourceY &gt; largeHeight - magHeight) {
if (sourceY &lt; 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(&quot;myCanvas1&quot;);
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(&quot;mouseout&quot;, function(){
events.drawStage();
}, false);
 }

var sources = {
cobraSmallImg: &quot;cobra_800x600.png&quot;, 
cobraLargeImg: &quot;cobra_280x210.bmp&quot;
};

loadImages(sources, drawImages);

[removed]
    
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;

Private - Private paste aren't shown in recent listings.

Delete After - When should we delete your paste?

Spam protection -

Reply to "Untitled"