allow selection of size by mouse

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

View File

@ -1,6 +1,6 @@
<template> <template>
<div id="canvas-container"> <div id="canvas-container">
<canvas ref="canvas" id="canvas"></canvas> <canvas ref="canvas" id="canvas" @mousedown="onMouse" @mousemove="onMouse" oncontextmenu="return false;"></canvas>
</div> </div>
</template> </template>
@ -15,6 +15,7 @@ export default {
image: null, image: null,
imageLoaded: false, imageLoaded: false,
slice: [0, 0], slice: [0, 0],
ratio: 1,
}; };
}, },
computed: {}, computed: {},
@ -53,10 +54,10 @@ export default {
0, 0, image.width, image.height, 0, 0, image.width, image.height,
0, 0, dims.width, dims.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 sliceX = parseInt(this.slice[0]) * this.ratio;
let sliceY = parseInt(this.slice[1]) * ratio; let sliceY = parseInt(this.slice[1]) * this.ratio;
if (sliceX > 0 && sliceY > 0) { if (sliceX > 0 && sliceY > 0) {
for (let x = 0; x < dims.width; x += sliceX) { for (let x = 0; x < dims.width; x += sliceX) {
@ -83,6 +84,27 @@ export default {
canvas.height = canvasContainer.offsetHeight - 10; canvas.height = canvasContainer.offsetHeight - 10;
this.refresh(); 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> </script>

View File

@ -9,16 +9,16 @@
<hr> <hr>
<div> <div>
<label for="slice_x">Slice X: </label> <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" <input class="spinBox" id="slice_x" v-model.number="guideSizeX" type="number" min="2" :max="imageSize[0]/2"
value="64"> step="1" value="64">
</div> </div>
<div> <div>
<label for="slice_x">No X remainder: {{noXremainder}}</label> <label for="slice_x">No X remainder: {{noXremainder}}</label>
</div> </div>
<div> <div>
<label for="slice_y">Slice Y: </label> <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" <input class="spinBox" id="slice_y" v-model.number="guideSizeY" type="number" min="2" :max="imageSize[1]/2"
value="64"> step="1" value="64">
</div> </div>
<div> <div>
<label for="slice_x">No Y remainder: {{noYremainder}}</label> <label for="slice_x">No Y remainder: {{noYremainder}}</label>
@ -160,6 +160,15 @@ export default {
let url = URL.createObjectURL(e.target.files[0]); let url = URL.createObjectURL(e.target.files[0]);
this.$emit("loadImage", url); 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 () { mounted: function () {
this.$bus.$on("imageLoaded", (image) => { this.$bus.$on("imageLoaded", (image) => {