当前位置：首页 > news >正文

konvajs绘制带有透明度的多边形

news 来源：原创 2024/9/20 7:24:20

Konva绘制带有透明度的多边形

先上效果图

Konva 是一个HTML5 Canvas JavaScript 框架，它通过对 2d context 的扩展实现了在桌面端和移动端的可交互性。Konva
提供了高性能的动画，补间，节点嵌套，布局，滤镜，缓存，事件绑定（桌面/移动端）等等功能。你可以使用 Konva
在舞台上绘制图形，给图形添加事件，移动、缩放和旋转图形并且支持高性能的动画即使包含数千个图形。

Konva工作原理

Konva 的对象是以一颗树的形式保存的，Konva.Stage 是树的根节点，Stage 子节点是用户创建的图层 Konva.Layer。

每一个 layer 有两个 <canvas> 渲染器：场景渲染器和
图像命中检测渲染器。场景渲染器输出你所看见的内容，图像命中渲染器在隐藏的 canvas 里用于高性能的检测事件。

图层可以包含图形、嵌套图形的组、嵌套组的组。Stage（舞台），layers（图层），groups（组），和 shapes（图形）
都是虚拟节点，类似于 HTML 的 DOM 节点。

节点结构图:

安装

npm i Konva@9.3.14

注意版本我这里使用的是 "konva": "^9.3.14"

导入

import * as Konva from 'konva

konva 在v8.x.x 版本的时候已经支持模块化导入了，这里我还是整体导入

使用

<template>  <div class="canvasDiv"> <!-- 定义一个容器，用于放置canvas画布 -->  <div id="canvas" ref="canvasRef"></div> <!-- 定义canvas的DOM元素，并绑定一个ref引用 -->  </div>  
</template>  <script setup>  
import {nextTick, onMounted, onUnmounted, ref} from 'vue' // 导入Vue的响应式系统和方法  
import * as Konva from 'konva' // 导入Konva库，用于图形绘制  const canvasRef = ref() // 创建一个响应式引用，用于访问canvas DOM元素  function init() {  const layer = new Konva.Layer(); // 创建一个新的图层  const stage = new Konva.Stage({ // 创建一个舞台，并配置其容器、宽度和高度  container: 'canvas',  width: canvasRef.value.clientWidth,  height: canvasRef.value.clientHeight || 700,  });  stage.add(layer); // 将图层添加到舞台上  const customShape = new CustomShape({ // 创建一个自定义形状，并配置其属性  x:10,  y:10,  width:300,  height:400,  borderWidth: 4,  borderColor: "#FFFFFF",  });  layer.add(customShape) // 将自定义形状添加到图层上  layer.draw() // 绘制图层  
}  onMounted(() => { // 当组件挂载完成后执行  nextTick(() => { // 在DOM更新完成后执行  init() // 初始化画布  })  
})  class CustomShape extends Konva.Shape { // 定义一个继承自Konva.Shape的自定义形状类  constructor(config) {  super(config);  const {borderWidth, width, height} = config // 解构配置对象，获取边框宽度、宽度和高度  this.sceneFunc(context => { // 定义形状的绘制函数  // 绘制一个复杂的形状，包括多个线段和曲线  context.beginPath();  context.moveTo(0, 0); // 起点  // 绘制形状的各个部分  context.lineTo(width - width * 0.1, 0);  context.lineTo(width, width * 0.1);  context.lineTo(width, height);  context.lineTo(width * 0.35, height);  context.lineTo(width * 0.3, height + height * 0.1);  context.lineTo(width * 0.25, height);  context.lineTo(0, height);  context.lineTo(0, 0);  context.closePath();  // 创建并应用渐变填充  const gradient = context.createLinearGradient(0, 0, 0, this.getHeight());  gradient.addColorStop(0, 'rgba(255,219,57,0.82)');   gradient.addColorStop(1, 'rgba(255,140,0,0.2)');   context.fillStyle = gradient;  context.fill();  // 创建并应用渐变边框  const borderGradient = context.createLinearGradient(0, 0, 0, this.getHeight());  borderGradient.addColorStop(0, 'rgba(255,255,255,1)');   borderGradient.addColorStop(1, 'rgba(255,255,255,0.4)');   context.strokeStyle = borderGradient;  context.lineWidth = borderWidth;  context.stroke();  });  }  
}  
</script>  <style scoped>  
.canvasDiv{  width: 99vw; height: 50vh; background-image: url("/src/static/img/bg-1.png"); background-size: 100% 100%; position: relative; 
}  
</style>