Canvas 不会画图 - Electron + Vue

Question

我正在尝试在我的 canvas 中绘制图像，但由于某种原因无法正常工作。我已经尝试使用默认 canvas API、KonvaJS 和 FabricJS，但其中 none 有效。其他形状如矩形、圆形等正常工作...

我的项目是通过 Vue Cli 使用 electron-builder 构建的 electron 应用程序。

默认代码 canvas 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的问题？

Answer 1

我将 "assets" 文件夹移动到 "public" 文件夹，它起作用了。

Canvas 不会画图 - Electron + Vue

Canvas not drawing images - Electron + Vue

vue.js

canvas

fabricjs

electron-builder

konva