allow selection of size by mouse

This commit is contained in:
Tomáš Mládek 2019-10-31 17:56:56 +01:00
parent 676c8f7fe0
commit 089f7d56c0
3 changed files with 43 additions and 9 deletions

View file

@ -4,7 +4,7 @@
<Sidebar ref="sidebar" @loadImage="loadImage" @guideSize="guideSize"/>
</div>
<div id="canvas-wrap">
<Canvas ref="canvas"/>
<Canvas ref="canvas" @params="setParams"/>
</div>
</div>
</template>
@ -25,6 +25,9 @@ export default {
guideSize: function (size) {
this.$refs.canvas.slice = size;
},
setParams: function (coords) {
this.$refs.sidebar.setParams(coords);
},
},
};
</script>

View file

@ -1,6 +1,6 @@
<template>
<div id="canvas-container">
<canvas ref="canvas" id="canvas"></canvas>
<canvas ref="canvas" id="canvas" @mousedown="onMouse" @mousemove="onMouse" oncontextmenu="return false;"></canvas>
</div>
</template>
@ -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;
},
},
};
</script>

View file

@ -9,16 +9,16 @@
<hr>
<div>
<label for="slice_x">Slice X: </label>
<input class="spinBox" id="slice_x" v-model.number="guideSizeX" type="number" min="2" max="1024" step="1"
value="64">
<input class="spinBox" id="slice_x" v-model.number="guideSizeX" type="number" min="2" :max="imageSize[0]/2"
step="1" value="64">
</div>
<div>
<label for="slice_x">No X remainder: {{noXremainder}}</label>
</div>
<div>
<label for="slice_y">Slice Y: </label>
<input class="spinBox" id="slice_y" v-model.number="guideSizeY" type="number" min="2" max="1024" step="1"
value="64">
<input class="spinBox" id="slice_y" v-model.number="guideSizeY" type="number" min="2" :max="imageSize[1]/2"
step="1" value="64">
</div>
<div>
<label for="slice_x">No Y remainder: {{noYremainder}}</label>
@ -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) => {