2

我想在 vue.js 中使用 konva 来绘制要在画布中显示的形状,所以我有一些矩形存储在 rectangles 数组中,需要绘制,但没有绘制任何东西。

<template>
<div>
  <Button id="b1" @click="promp()" style="background:url(/squ.png)"></Button>
  <canvas id="myCanvas" width="500" height="600" style="border:1px solid #000000;" @click="detectclick($event)">
      <v-rect
          v-for="item in rectangles"
          :key="item.id"
          :config="item"
          @transformend="handleTransformEnd($e,rectangles)"
        />
        <v-transformer ref="transformer" />
  </canvas>
 
  </div>
</template>
4

1 回答 1

0

您不能将vue-konva组件放在<canvas>元素内。

所有vue-konva组件都设计为仅在<v-layer组件内部工作,该组件应放置在<v-stage>. 为了理解,Konva 节点结构看一下Konva Overview

<v-stage :config="{width: 500, height: 500}">
  <v-layer>
    <v-rect
      v-for="item in rectangles"
      :key="item.id"
      :config="item"
      @transformend="handleTransformEnd($e,rectangles)"
    />
  </v-layer>
</v-stage>
于 2020-11-26T18:45:21.480 回答