我正在尝试在我的画布中绘制图像，但由于某种原因它无法正常工作。我尝试过使用默认画布 API、KonvaJS 和 FabricJS，但这些都不起作用。其他形状，如矩形、圆形等正常工作......
我的项目是一个通过 Vue Cli 使用 electron-builder 构建的电子应用程序。
使用默认画布 API 的代码：
<template>
<div>
<canvas ref="cnv" width="500" height="500"></canvas>
</div>
</template>
<script>
export default {
name: 'Test',
mounted() {
let cnv = document.querySelector("canvas");
let ctx = cnv.getContext("2d");
let img = new Image()
img.src = "./img.png"
img.onload = () => ctx.drawImage(img, 10, 10);
}
}
</script>
使用 KonvaJS 编写代码：
<template>
<div id="cnv"></div>
</template>
<script>
import Konva from 'konva'
export default {
name: 'Test',
mounted() {
let stage = new Konva.Stage({
container: 'cnv',
width: 500,
height: 500,
})
let layer = new Konva.Layer()
stage.add(layer)
// Doesn't work with "fromUrl" method too
let image = new Image()
image.src = 'img.png'
image.onload = () => {
let img = new Konva.Image({
x: 20,
y: 20,
width: 32,
height: 48,
image: image,
})
layer.add(img)
layer.draw()
}
}
}
</script>
FabricJS 代码：
<template>
<div>
<canvas ref="cnv" width="500" height="500"></canvas>
</div>
</template>
<script>
import { fabric } from 'fabric'
export default {
name: 'Test',
mounted() {
const ref = this.$refs.cnv
const canvas = new fabric.Canvas(ref)
fabric.Image.fromURL('img.png', function(img) {
img.set({
left: 20,
top: 20,
})
canvas.add(img)
})
}
}
</script>
CodeSandbox 中的示例：draw-image-test
是我做错了什么，还是这是一个vue问题？
