HTML5 Canvas 设置形状不透明度教程

要使用 Konva 设置形状的不透明度，我们可以在实例化节点时设置 opacity 属性，或者我们可以使用 opacity() 方法。

形状的透明度值范围在 0 到 1 之间，其中 0 完全透明，1 完全不透明。除非另有说明，所有形状默认的不透明度值为 1。

如果您想为多个形状应用透明度而不看到重叠区域，请查看 透明组演示

操作说明：将鼠标悬停在五边形上以改变其不透明度。

Vanilla

import Konva from 'konva';

var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height,
});
var layer = new Konva.Layer();

var pentagon = new Konva.RegularPolygon({
    x: stage.width() / 2,
    y: stage.height() / 2,
    sides: 5,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    opacity: 0.5,
});

pentagon.on('mouseover', function () {
    this.opacity(1);
});

pentagon.on('mouseout', function () {
    this.opacity(0.5);
});

// 将形状添加到图层
layer.add(pentagon);

// 将图层添加到舞台
stage.add(layer);

Open Sandbox

React

import React, { useState } from 'react';
import { Stage, Layer, RegularPolygon } from 'react-konva';

const App = () => {
  const [opacity, setOpacity] = useState(0.5);
  const [cursor, setCursor] = useState('default');

  const handleMouseEnter = () => {
    setOpacity(1);
    setCursor('pointer');
  };

  const handleMouseLeave = () => {
    setOpacity(0.5);
    setCursor('default');
  };

  return (
    <Stage width={window.innerWidth} height={window.innerHeight} style={{ cursor: cursor }}>
      <Layer>
        <RegularPolygon
          x={window.innerWidth / 2}
          y={window.innerHeight / 2}
          sides={5}
          radius={70}
          fill="red"
          stroke="black"
          strokeWidth={4}
          opacity={opacity}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageSize" :style="{ cursor: cursor }">
    <v-layer>
      <v-regular-polygon
        :config="{
          x: stageSize.width / 2,
          y: stageSize.height / 2,
          sides: 5,
          radius: 70,
          fill: 'red',
          stroke: 'black',
          strokeWidth: 4,
          opacity: opacity,
        }"
        @mouseenter="onMouseEnter"
        @mouseleave="onMouseLeave"
      />
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  data() {
    return {
      stageSize: {
        width: window.innerWidth,
        height: window.innerHeight,
      },
      opacity: 0.5,
      cursor: 'default',
    };
  },
  methods: {
    onMouseEnter() {
      this.opacity = 1;
      this.cursor = 'pointer';
    },
    onMouseLeave() {
      this.opacity = 0.5;
      this.cursor = 'default';
    },
  },
};
</script>

Open Sandbox