Tween 模糊滤镜教程

要使用 Konva 对滤镜进行补间，我们只需对与滤镜相关的属性进行补间。 在本教程中，我们将补间 blurRadius 属性，该属性控制应用于图像的模糊量。

步骤：将鼠标悬停或触摸图像以聚焦（减少模糊）。

Vanilla

import Konva from 'konva';

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

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

const layer = new Konva.Layer();

// 创建图像
const imageObj = new Image();
imageObj.onload = () => {
const lion = new Konva.Image({
x: 50,
y: 50,
image: imageObj,
draggable: true,
});

layer.add(lion);

// 添加模糊滤镜
lion.cache();
lion.filters([Konva.Filters.Blur]);
lion.blurRadius(10);

// 创建模糊补间
const tween = new Konva.Tween({
node: lion,
duration: 0.5,
blurRadius: 0,
easing: Konva.Easings.EaseInOut,
});

// 绑定事件
lion.on('mouseenter touchstart', () => {
tween.play();
});

lion.on('mouseleave touchend', () => {
tween.reverse();
});

};
imageObj.src = 'https://konvajs.org/assets/lion.png';
imageObj.crossOrigin = 'anonymous';

stage.add(layer);

Open Sandbox

React

import { Stage, Layer, Image } from 'react-konva';
import { useRef, useEffect } from 'react';
import useImage from 'use-image';

const App = () => {
  const imageRef = useRef();
  const [image] = useImage('/images/lion.png');
  const tweenRef = useRef();

  useEffect(() => {
    if (!imageRef.current) return;

    const node = imageRef.current;
    node.cache();
    node.filters([Konva.Filters.Blur]);
    node.blurRadius(10);

    tweenRef.current = new Konva.Tween({
      node: node,
      duration: 0.5,
      blurRadius: 0,
      easing: Konva.Easings.EaseInOut,
    });
  }, [image]);

  const handleMouseEnter = () => {
    tweenRef.current.play();
  };

  const handleMouseLeave = () => {
    tweenRef.current.reverse();
  };

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Image
          ref={imageRef}
          x={50}
          y={50}
          image={image}
          draggable
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
          onTouchStart={handleMouseEnter}
          onTouchEnd={handleMouseLeave}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-image
        v-if="image"
        :config="imageConfig"
        @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
        @touchstart="handleMouseEnter"
        @touchend="handleMouseLeave"
        ref="imageRef"
      />
    </v-layer>
  </v-stage>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import Konva from 'konva';

const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const image = ref(null);
const imageRef = ref(null);
let tween = null;

// 加载图像
const img = new Image();
img.onload = () => {
  image.value = img;
};
img.src = '/images/lion.png';

const imageConfig = computed(() => ({
  x: 50,
  y: 50,
  image: image.value,
  draggable: true
}));

onMounted(() => {
  if (!imageRef.value) return;

  const node = imageRef.value.getNode();
  node.cache();
  node.filters([Konva.Filters.Blur]);
  node.blurRadius(10);

  tween = new Konva.Tween({
    node: node,
    duration: 0.5,
    blurRadius: 0,
    easing: Konva.Easings.EaseInOut,
  });
});

const handleMouseEnter = () => {
  tween.play();
};

const handleMouseLeave = () => {
  tween.reverse();
};
</script>

Open Sandbox