画布不绘制图像 - Electron + Vue

Posted 2023-03-22

【中文标题】画布不绘制图像 - Electron + Vue

【英文标题】：Canvas not drawing images - Electron + Vue

【发布时间】：2020-08-26 02:52:12

【问题描述】：

我正在尝试在我的画布中绘制图像，但由于某种原因它无法正常工作。我尝试过使用默认画布 API、KonvaJS 和 FabricJS，但这些都不起作用。其他形状，如矩形、圆形等正常工作......

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

使用默认画布 API 的代码：

<template>
  <div>
    <canvas ref="cnv"  ></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"  ></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的问题？

【问题讨论】：

请为此使用codesandbox.io 创建一个small demos 以显示正在发生的问题。

在您的代码沙盒演示中，将assets 文件夹移动到public 下，它会起作用。

【参考方案1】：

我将“assets”文件夹移动到“public”文件夹中，并且成功了。