- Vue.jsを使用
- 画像を描画
- 画像上に座標を指定してブロック枠を描画
コード
<template>
<div>
<canvas ref="canvas" :width="canvasWidth" :height="canvasHeight" />
</div>
</template>
<script>
export default {
data() {
return {
canvasWidth: 400,
canvasHeight: 800
}
},
computed: {
imageUrl() {
return this.$store.getters["images/getImageUrl"]
},
coordinate() {
retun this.$store.getters["coordinates"/getCoordinate"]
}
},
async mounted() {
await this.getImageUrl()
this.draw()
},
methods: {
async getImageUrl() {
await this.$store.dispatch(
"images/getImageUrl",
)
},
draw() {
const canvas = this.$refs.canvas
const ctx = canvas.getContext("2d")
const img = document.createElement("img")
img.src = this.imageUrl
img.addEventListener("load", () => {
const originalWidth = img.naturalWidth
const reducedScale = this.canvasWidth / originalWidth
ctx.scale(reducedScale, reducedScale)
ctx.drawImage(img, 0, 0)
ctx.lineWidth = 5
ctx.strokeStyle = "#0f0"
cost xMax = this.Coordinate.x_max
cost xMin = this.Coordinate.x_min
cost yMax = this.Coordinate.y_max
cost yMin = this.Coordinate.y_min
ctx.beginPath()
ctx.moveTo(xMin, yMin)
ctx.lineTo(xMax, yMin)
ctx.lineTo(xMax, yMax)
ctx.lineTo(xMin, yMax)
ctx.closePath()
ctx.stroke()
})
}
}
}
</script>