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

Posted 2022-06-14 编程圈子

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