在 React-Konva 中克隆节点并附加到单独的层

Question

我正在尝试重新创建类似于此站点上的悬停效果的效果：http://tabotabo.com

目前，我正在做的是让视频在具有第二个放大图层的图层上播放，同时播放带有destination-in 合成操作的附加文本对象的视频。这目前运行良好，但我很好奇是否有更有效的方法来实现这一点，方法是缓存或克隆第一层并将其发送到第二层，而不是让两个单独的视频对象串联运行。

这里是相关代码，如果有帮助的话。

主渲染：

<Stage width={width} height={height} ref={ref => (this.stage = ref)}>
  <Layer hitGraphEnabled={false}>
    <CanvasVideo
      src={this.state.background} 
      settings={{id: 'main', width: width, height: height }}
      ref={(el) => this.main = el }
    />
  </Layer>

  <Layer hitGraphEnabled={false} scaleX={hoverScale} scaleY={hoverScale} x={scaleOffsetX} y={scaleOffsetY}>
    <CanvasVideo
      src={this.state.background} 
      settings={{id: 'main2', width: width, height: height }}
      ref={(el) => this.main2 = el }
    />

    <Text 
      id="hoverText"
      text={this.state.menu.hoverText}
      globalCompositeOperation='destination-in'
      fontSize={200}
      fill="white"
      opacity={hoverOpacity} 
      height={height}
      width={width}
      align="center"
      verticalAlign='middle'
    />
  </Layer>
</Stage>

视频容器类：

import React, { Component } from 'react';
import Konva from 'konva';
import { render } from 'react-dom';
import { Stage, Layer, Image } from 'react-konva';

class CanvasVideo extends Component {
    constructor(props) {
      super(props);

      const video = document.createElement('video');
      video.muted = true;
      video.autoplay = false;
      video.loop = true;
      video.src = props.src;
      this.state = {
        video: video
      };
      video.addEventListener('canplay', () => {
        video.play();
        this.image.getLayer().batchDraw();
        this.requestUpdate();
      });

    }

    requestUpdate = () => {
      this.image.getLayer().batchDraw();
      requestAnimationFrame(this.requestUpdate);
    }
    render() {
      let { settings } = this.props
        return (
            <Image
              {...settings}
              image={this.state.video}
              ref={node => { this.image = node; }}
            />
        );
    }
}

CanvasVideo.defaultProps = {
  settings: null,
};

export default CanvasVideo;

任何解释或见解将不胜感激。

谢谢！

Answer 1

目前，没有办法在不同的父母内部重用Konva.Image 或任何其他Konva.Node。 Konva.Node 只能有一个父级。

我看到这里只有一个优化是重用您在CanvasVideo 组件中创建的<video> 元素。可以是这样的：

const cache = {};

function createVideo(url) {
   if (cache[url]) {
      return cache[url];
   }
   const video = document.createElement('video');
   video.src = url;
   cache[url] = video;
   return video;
}

const video = createVideo(props.src);