有用过fabricjs的吗？有一个还原的小问题？

Question

下面是源码，现在有一个小问题，就是我有一个还源，我想要的的把下面的图片不管怎么操作，点“还原”就重新加载图片显示，现在的问题是我操作过“还原”以后，我再去下面放大缩小操作图片，我发现图片还是以他没还原前的状态显示的，感觉canvas!.on('mouse:wheel', (options) => {})这个操作保存了之前的图片的状态或者说我逻辑上那里没有清除原来的？有看出我逻辑哪里不对的吗？？？

<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { ElRow, ElCol, ElButton } from 'element-plus'
import { onMounted, ref } from 'vue'
import { fabric } from 'fabric'

const canvasAll = ref<HTMLDivElement | null>(null)
let canvas: fabric.Canvas | null = null
onMounted(() => {
  if (canvasAll.value) {
    init()
  }
})
const init = () => {
  canvas = new fabric.Canvas('canvas')
  if (canvasAll.value) {
    canvas.setWidth(canvasAll.value.$el.offsetWidth)
    canvas.setHeight(800)
  }
  fabric.Image.fromURL('https://www.chunshu.net/2.png', (img) => {
    canvas!.add(img)
    canvas!.renderAll()
    addScrollListener()
  })
}
const addScrollListener = () => {
  canvas!.on('mouse:wheel', (options) => {
    console.log(options)
    options.e.preventDefault()
    options.e.stopPropagation()
    let pointer: fabric.Point | undefined = options.pointer
    if (options.e.deltaY > 0) {
      canvas!.zoomToPoint(pointer!, canvas!.getZoom() / 1.1)
    } else {
      canvas!.zoomToPoint(pointer!, canvas!.getZoom() * 1.1)
    }
  })
}
const restorex = () => {
  init()
}
</script>

<template>
  <ContentWrap title="Canvas">
    <ElRow>
      <ElCol :span="4" />
      <ElCol :span="4" />
      <ElCol ref="canvasAll" :span="16">
        <ContentWrap class="m-auto">
          <ElButton @click="restorex">还原</ElButton>
          <hr />
          <canvas id="canvas"></canvas>
        </ContentWrap>
      </ElCol>
    </ElRow>
  </ContentWrap>
</template>

Answer 1

图片缩放可以用这个插件：https://vuejsexamples.com/vue2-component-for-resizable-rotabl...