xxxxxxxxxx
63
let sf = 1; // scaleFactor
let x = 0; // pan X
let y = 0; // pan Y
let img;
let mx, my; // mouse coords;
var dragging = false; // Is the object being dragged?
var rollover = false; // Is the mouse over the ellipse?
// var x, y, w, h; // Location and size
var offsetX, offsetY; // Mouseclick offset
function preload(){
img=loadImage('a5 love chronicles-all.png');
}
function setup() {
createCanvas(innerWidth, innerHeight);
}
function draw() {
mx = mouseX;
my = mouseY;
background(255);
translate(x, y);
// translate(mx, my);
scale(sf);
// translate(-mx, -my);
// translate();
image(img,0,0);
if (mouseIsPressed) {
x -= pmouseX - mouseX;
y -= pmouseY - mouseY;
}
if (dragging) {
x = mouseX + offsetX;
y = mouseY + offsetY;
}
}
function mousePressed() {
// Did I click on the rectangle?
dragging = true;
// If so, keep track of relative location of click to corner of rectangle
offsetX = x-mouseX;
offsetY = y-mouseY;
}
function mouseReleased() {
// Quit dragging
dragging = false;
}
window.addEventListener("wheel", function(e) {
if (e.deltaY > 0)
sf *= 1.05;
else
sf *= 0.95;
});