Fabric.js：在 canvas 中设置新图像，但 canvas 未更改

Question

我向 canvas 添加了多张图片，但我想更改单击按钮时添加的第一张图片。现在，canvas 没有更新。我不知道为什么（我在 nuxt js 中使用 fabric）。 例如： 首先将图像添加到 canvas in mounted 然后我单击“添加”按钮，第二个图像将添加到 canvas （addPattern 方法）。之后，我单击“更改”按钮 (changeImage) 方法，但显示的 canvas 未更新

我的代码

<template>
    <div>
        <canvas ref="can" width="500" height="500"></canvas>
        <button @click="addPattern">add</button>
        <button @click="changeImage">change</button>
    </div>
</template>
<script>
    let canvas = new fabric.Canvas('c')
    mounted() {
        const ref = this.$refs.can
        canvas = new fabric.Canvas(ref)
        fabric.Image.fromURL('https//www.test.com/test.png', function (productImage) {
            productImage.set({
                width: 500,
                height: 500,
                selectable: false,
                name: 'product',
            })
            canvas.add(productImage)
        })
    },
    method: {
        addPattern() {
            fabric.Image.fromURL(image, function (patternImage) {
                patternImage.set({
                    selectable: true,
                })
                patternImage.scaleToHeight(120)
                patternImage.scaleToWidth(120)
                canvas.add(patternImage)
            })
        }
        changeImage() {
            canvas.item(0).set({
                src: "https//www.test.com/test2.png",
                width: 500,
                height: 500,
                selectable: false,
                name: 'product',
            })
            canvas.renderAll()
        }
    }
</script>

Answer 1

要更改src属性，您需要使用setSrc方法。

http://fabricjs.com/docs/fabric.Image.html#setSrc

    canvas.item(0).set({
        width: 500,
        height: 500,
        selectable: false,
        name: 'product',
    })
    .setSrc("https//www.test.com/test2.png", () => {
        canvas.renderAll()
    })

Fabric.js：在 canvas 中设置新图像，但 canvas 未更改

Fabric.js : Set new image in canvas but canvas not changing

javascript

canvas

fabricjs

nuxtjs