|
一、vue-konva是什么？
Vue Konva是一个JavaScript库，用于使用Vue绘制复杂的画布图形。 它提供了对Konva框架的声明性和反应性绑定。 所有vue-konva组件都对应于同名的KONVA组件，前缀为“ V-”。 KONVA对象可用的所有参数都可以添加为相应的VUE-KONVA组件的配置中的配置。 官网链接konva 中文链接：konva 中文官网：http://konvajs-doc.bluehymn.com/docs/
二、核心形状有：
【v矩形、v圆形、v椭圆、v线、v图像、v文本、v文本路径、v星形、v标签、v路径、 v规则多边形】。 v-rect, v-circle, v-ellipse, v-line, v-image, v-text, v-text-path, v-star, v-label, v-path, v-regular-polygon. 您也可以创建自定义形状。
三.安装引入
pnpm install vue-konva konva --save
import { createApp } from 'vue';
import App from './App.vue';
import VueKonva from 'vue-konva';
const app = createApp(App);
app.use(VueKonva);
app.mount('#app');
四、组件模板中的引用
export default {
data() {
return {
configKonva: {
width: 200,
height: 200
},
configCircle: {
x: 100,
y: 100,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
}
};
}
};
五、案例
|