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

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>

主要的代码是CustomShape类实现的，CustomShape这个类又去继承了Konva 的 Konva.Shape 这个类