通过 konva 绘制形状以显示在 canvas
Draw shapes by konva to be displayed in canvas
我想在 vue.js 中使用 konva 绘制要在 canvas 中显示的形状,所以我在 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>
您不能将 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>
我想在 vue.js 中使用 konva 绘制要在 canvas 中显示的形状,所以我在 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>
您不能将 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>