diff --git a/src/App.vue b/src/App.vue index f0b9de6..2d2051f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,7 +4,7 @@
- +
@@ -25,6 +25,9 @@ export default { guideSize: function (size) { this.$refs.canvas.slice = size; }, + setParams: function (coords) { + this.$refs.sidebar.setParams(coords); + }, }, }; diff --git a/src/components/Canvas.vue b/src/components/Canvas.vue index f73a09a..9425e31 100644 --- a/src/components/Canvas.vue +++ b/src/components/Canvas.vue @@ -1,6 +1,6 @@ @@ -15,6 +15,7 @@ export default { image: null, imageLoaded: false, slice: [0, 0], + ratio: 1, }; }, computed: {}, @@ -53,10 +54,10 @@ export default { 0, 0, image.width, image.height, 0, 0, dims.width, dims.height); - let ratio = dims.width / image.width; + this.ratio = dims.width / image.width; - let sliceX = parseInt(this.slice[0]) * ratio; - let sliceY = parseInt(this.slice[1]) * ratio; + let sliceX = parseInt(this.slice[0]) * this.ratio; + let sliceY = parseInt(this.slice[1]) * this.ratio; if (sliceX > 0 && sliceY > 0) { for (let x = 0; x < dims.width; x += sliceX) { @@ -83,6 +84,27 @@ export default { canvas.height = canvasContainer.offsetHeight - 10; this.refresh(); }, + onMouse: function (ev) { + if (ev.buttons === 0) { + return; + } + ev.preventDefault(); + + const type = { + 1: "size", + 2: "offset", + }[ev.buttons]; + + if (type !== undefined) { + const coords = { + "type": type, + "x": Math.round((ev.x - ev.target.offsetLeft) / this.ratio), + "y": Math.round((ev.y - ev.target.offsetTop) / this.ratio), + }; + this.$emit("params", coords); + } + return false; + }, }, }; diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index ca5839e..f580e8c 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -9,16 +9,16 @@
- +
- +
@@ -160,6 +160,15 @@ export default { let url = URL.createObjectURL(e.target.files[0]); this.$emit("loadImage", url); }, + setParams (coords) { + switch (coords.type) { + case "size": + this.lockSize = false; + this.guideSizeX = coords.x; + this.guideSizeY = coords.y; + break; + } + }, }, mounted: function () { this.$bus.$on("imageLoaded", (image) => {