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
        }"
      />

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']
     }"/>

连接与端子形状

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

虚线

<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,
              }"/>

7. 楔形

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