Question

我正在尝试用颜色以外的其他任何东西填充Konvajs（konva-react）中的文本。即使在尝试填充渐变时将填充优先级设置为“ linear-gradient”，它也默认为颜色。我尝试将颜色填充设置为透明。它仍然不显示图像或渐变。这是尝试填充图像的代码。

import React, { Component } from 'react'
import Konva from "konva"
import {
  Stage,
  Layer,
  Image,
  Text
} from "react-konva"
import './App.css'


class Text2 extends React.Component {
  state = {
    text: "Happy New Year!",
    image: new window.Image(),
    ready: true
  }

  componentDidMount() {
    console.log("text path componentDidMount")
    console.log(this.state.image.src === null)
    this.state.image.src = 'http://localhost:3004/silver-metal-background-01.jpg'

    this.state.image.onload = e => {
      console.log('silver image loaded')
      this.state.ready = true
      console.log(this.TextNode)
    }

  }

  render = () => {
    var text =
      this.state.ready === false
      ? <React.Fragment></React.Fragment>
      :  <Text
          ref={node => {
            this.TextNode = node
          }}
          name="happyNewYear"
          x={32}
          y={175}
          text={this.state.text}
          fontFamily='Sigmar One'
          fontSize={36}
          fontWeight='bold'
          draggable={true}
          fill={this.state.image}
          stroke='red'
          strokeWidth={2}
          scaleX={1}
          scaleY={1}
          opacity={1}
        />

    return (
      <React.Fragment>
        { text }
      </React.Fragment>
    );
  }
}

class App extends Component {
render = () => {

  return (
    <React.Fragment>
      <Stage
        ref={node => {
          this.stage = node
        }}
        x={0}
        y={0}
        width={window.innerWidth} 
        height={window.innerHeight}            
      >
        <Layer
          ref={node => {
            this.layer = node
          }}
        >
          <Text2 />
        </Layer>
      </Stage>
    </React.Fragment>
  )
}

export default App

这里的代码试图填充渐变。

import React, { Component } from 'react'
import Konva from "konva"
import {
  Stage,
  Layer,
  Image,
  Text
} from "react-konva"
import './App.css'


class Text2 extends React.Component {
  state = {
    text: "Happy New Year!"
  }

  componentDidMount() {
    console.log("text path componentDidMount")

  }

  render = () => {
    var text =
      this.state.ready === false
      ? <React.Fragment></React.Fragment>
      :  <Text
          ref={node => {
            this.TextNode = node
          }}
          name="happyNewYear"
          x={32}
          y={175}
          text={this.state.text}
          fontFamily='Sigmar One'
          fontSize={36}
          fontWeight='bold'
          draggable={true}
          fillLinearGradientStartPoint={ {x : 0, y : 0} }
          fillLinearGradientEndPoint={ {x : 100, y : 100} }
          fillLinearGradientColorStops={[0, 'rgba(0,0,0,0.7)', 1, 'rgba(255,255,255,0.5)']}
          fillEnabled={true}
          fillPriority='linear-gradient'
          stroke='red'
          strokeWidth={2}
          scaleX={1}
          scaleY={1}
          opacity={1}
        />

    return (
      <React.Fragment>
        { text }
      </React.Fragment>
    );
  }
}

class App extends Component {
render = () => {

  return (
    <React.Fragment>
      <Stage
        ref={node => {
          this.stage = node
        }}
        x={0}
        y={0}
        width={window.innerWidth} 
        height={window.innerHeight}            
      >
        <Layer
          ref={node => {
            this.layer = node
          }}
        >
          <Text2 />
        </Layer>
      </Stage>
    </React.Fragment>
  )
}

export default App

Answer 1

线性渐变在您的代码中应该可以正常工作。演示：https://codesandbox.io/s/ykpmjmynvj

但是我发现Konva代码中存在一个模式和径向渐变错误。它应该在下一发行版中修复。在发布之前，您可以使用以下解决方法：

您可以使用外部画布通过globalCompositeOperation绘制填充文本。然后将此画布用作Konva.Image。

How do you fill Text in Canvas with Image?

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

class Text2 extends React.Component {
  state = {
    text: "Happy New Year!",
    canvas: null
  };

  componentDidMount() {
    var image = new window.Image();
    image.onload = () => {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");

      ctx.save();
      ctx.beginPath();

      // put text on canvas
      ctx.font = "20px Verdana";
      ctx.fillText(this.state.text, 10, 20);
      ctx.fill();

      // use compositing to draw the background image
      // only where the text has been drawn
      ctx.beginPath();
      ctx.globalCompositeOperation = "source-in";
      ctx.drawImage(image, 0, 0);
      ctx.restore();

      this.setState({
        canvas: canvas
      });
    };
    image.src =
      "https://uploads.codesandbox.io/uploads/user/9fa343fe-4c37-4683-bd9c-39d985ca18bb/SHmg-gold-metal-background-02.jpg";
  }

  render = () => {
    return <Image image={this.state.canvas} draggable={true} />;
  };
}

class App extends Component {
  render = () => {
    return (
      <React.Fragment>
        <Stage
          ref={node => {
            this.stage = node;
          }}
          x={0}
          y={0}
          width={window.innerWidth}
          height={window.innerHeight}
        >
          <Layer
            ref={node => {
              this.layer = node;
            }}
          >
            <Text2 />
          </Layer>
        </Stage>
      </React.Fragment>
    );
  };
}

render(<App />, document.getElementById("root"));

https://codesandbox.io/s/xojz9q1k3p

Konva反应文本填充图像或渐变不起作用

1 个答案: