allow selection of size by mouse
This commit is contained in:
parent
676c8f7fe0
commit
089f7d56c0
3 changed files with 43 additions and 9 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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) => {
|
||||
|
|
Loading…
Reference in a new issue