|
@@ -33,7 +33,7 @@ const canvas = {
|
|
|
width: 0,
|
|
width: 0,
|
|
|
height: 0,
|
|
height: 0,
|
|
|
images: [],
|
|
images: [],
|
|
|
- level: 4
|
|
|
|
|
|
|
+ level: 0
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const mouse = {
|
|
const mouse = {
|
|
@@ -138,20 +138,31 @@ const draw_ = function(ctx, isize, url, level, images, id, coords) {
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+const init = function(c) {
|
|
|
|
|
+ const image = new Image();
|
|
|
|
|
+ image.src = canvas.url + "0".repeat((canvas.level + 1) * 2)
|
|
|
|
|
+
|
|
|
|
|
+ image.onload = () => {
|
|
|
|
|
+ canvas.width = image.width;
|
|
|
|
|
+ canvas.height = image.height;
|
|
|
|
|
+ canvas.images = draw(c.getContext("2d"), canvas.boundary, canvas,
|
|
|
|
|
+ canvas.url, canvas.level, canvas.images, {x: 0, y: 0});
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
const main = function() {
|
|
const main = function() {
|
|
|
const c = document.getElementById("canvas");
|
|
const c = document.getElementById("canvas");
|
|
|
- c.setAttribute("width", 1000); // window.getComputedStyle(document.body).getPropertyValue("width"));
|
|
|
|
|
- c.setAttribute("height", 1000); // window.getComputedStyle(document.body).getPropertyValue("height"));
|
|
|
|
|
|
|
+ c.setAttribute("width", window.getComputedStyle(document.body).getPropertyValue("width"));
|
|
|
|
|
+ c.setAttribute("height", window.getComputedStyle(document.body).getPropertyValue("height"));
|
|
|
|
|
|
|
|
document.addEventListener("mousedown", (e) => {
|
|
document.addEventListener("mousedown", (e) => {
|
|
|
- console.log(e);
|
|
|
|
|
- if (c === document.activeElement && e.buttons === 1) {
|
|
|
|
|
|
|
+ if (c === document.activeElement && e.button === 0) {
|
|
|
mouse.prevX = e.clientX;
|
|
mouse.prevX = e.clientX;
|
|
|
mouse.prevY = e.clientY;
|
|
mouse.prevY = e.clientY;
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
document.addEventListener("mouseup", (e) => {
|
|
document.addEventListener("mouseup", (e) => {
|
|
|
- if (c === document.activeElement) {
|
|
|
|
|
|
|
+ if (c === document.activeElement && e.button === 0) {
|
|
|
mouse.x = e.clientX;
|
|
mouse.x = e.clientX;
|
|
|
mouse.y = e.clientY;
|
|
mouse.y = e.clientY;
|
|
|
|
|
|
|
@@ -160,13 +171,12 @@ const main = function() {
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- const image = new Image();
|
|
|
|
|
- image.src = canvas.url + "0".repeat((canvas.level + 1) * 2)
|
|
|
|
|
|
|
+ document.addEventListener("wheel", (e) => {
|
|
|
|
|
+ if (c === document.activeElement) {
|
|
|
|
|
+ canvas.level += e.deltaY > 0 ? 1 : -1;
|
|
|
|
|
+ init(c);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
|
|
|
- image.onload = () => {
|
|
|
|
|
- canvas.width = image.width;
|
|
|
|
|
- canvas.height = image.height;
|
|
|
|
|
- canvas.images = draw(c.getContext("2d"), canvas.boundary, canvas,
|
|
|
|
|
- canvas.url, canvas.level, canvas.images, {x: 0, y: 0});
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ init(c);
|
|
|
};
|
|
};
|
