0
点赞
收藏
分享

微信扫一扫

Vue2-Canvas库 KonvaJS入门 1 安装与引用


KonvaJS入门 1 安装与引用

  • ​​一、简介​​
  • ​​二、Vue2下安装与引用​​
  • ​​1. npm 安装​​
  • ​​2. 引用​​
  • ​​3. 使用​​
  • ​​三、基本图形​​
  • ​​1. 常用属性​​
  • ​​3.1.1 config 配置属性​​
  • ​​2. 文本​​
  • ​​3. 正方形​​
  • ​​4. 圆​​
  • ​​5. 线段​​
  • ​​下面是画三角形,每个边带0.2弧度。​​
  • ​​连接与端子形状​​
  • ​​虚线​​
  • ​​6. 椭圆​​
  • ​​7. 楔形​​

一、简介

KonvaJS 是一个功能强大的Html5 Canvas库。

  • 文档:https://konvajs.org/docs/vue/index.html

二、Vue2下安装与引用

1. npm 安装

npm install vue-konva@2 konva --save

2. 引用

在main.js中

import VueKonva from 'vue-konva';

Vue.use(VueKonva);

3. 使用

<template>
<v-stage :config="configKonva">
<v-layer>
<v-circle :config="configCircle"></v-circle>
</v-layer>
</v-stage>
</template>

js设置:

<script>
export default {
data() {
return {
configKonva: {
width: 200,
height: 200
},
configCircle: {
x: 100,
y: 100,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
}
};
}
};

</script>

三、基本图形

1. 常用属性

3.1.1 config 配置属性

  • width: 宽
  • height: 高
  • x/y:坐标
  • fill:填充颜色
  • draggable:是否可以拖动

2. 文本

<div>
<v-stage ref="stage" :config="stageSize">
<v-layer>
<v-text :config="{text: 'Some text on canvas', fontSize: 15}"/>
<v-layer>
</v-stage>
</div>

3. 正方形

<v-rect :config="{
x: 20,
y: 50,
width: 100,
height: 100,
fill: 'red',
shadowBlur: 10
}"
/>

Vue2-Canvas库 KonvaJS入门 1 安装与引用_sed

4. 圆

<v-circle :config="{
x: 200,
y: 100,
radius: 50,
fill: 'green'
}"
/>

5. 线段

下面是画三角形,每个边带0.2弧度。

<v-line :config="{
x: 20,
y: 200,
points: [0, 0, 200, 0, 100, 200],
tension: 0.2,
closed: true,
stroke: 'black',
fillLinearGradientStartPoint: { x: -50, y: -50 },
fillLinearGradientEndPoint: { x: 50, y: 50 },
fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
}"/>

Vue2-Canvas库 KonvaJS入门 1 安装与引用_vue.js_02

连接与端子形状

<v-line :config="{
x: 100,
y: 100,
points: [5, 70, 140, 23, 200, 100, 100, 20],
stroke: 'red',
strokeWidth: 15,
lineCap: 'round',
lineJoin: 'round',
}"/>

Vue2-Canvas库 KonvaJS入门 1 安装与引用_常用属性_03

虚线

<v-line :config="{
x: 100,
y: 100,
points: [5, 70, 140, 23, 200, 100, 100, 20],
stroke: 'red',
strokeWidth: 2,
lineCap: 'round',
lineJoin: 'round',
dash: [33, 10],
}"/>

6. 椭圆

<v-ellipse :config="{
x: 200,
y: 200,
radiusX: 100,
radiusY: 50,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
}"/>

Vue2-Canvas库 KonvaJS入门 1 安装与引用_sed_04

7. 楔形

<v-wedge :config="{
x: 200,
y: 200,
radius: 70,
angle: 60,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
rotation: -120,
}"/>

Vue2-Canvas库 KonvaJS入门 1 安装与引用_javascript_05


举报

相关推荐

0 条评论