Как я могу использовать элемент SVG, созданный с помощью JSX, в качестве источника изображения в Canvas? - PullRequest
0 голосов
/ 18 февраля 2019

У меня есть приложение ReactJS.Я динамически генерирую изображения SVG как компоненты JSX.Пока все хорошо, но теперь мне нужно использовать SVG в качестве источника изображения в элементе Canvas.Это прекрасно работает со статическими файлами SVG, но как я могу получить динамический SVG на холсте?

Упрощенная версия появляется во фрагменте.В методе componentDidMount показаны два подхода к вызову drawImage: создание несмонтированного SvgSource и использование ссылки на один, смонтированный на странице, но оба они терпят неудачу.

class App extends React.Component {

	// On mount, paint the SVG in the canvas
	componentDidMount(){
  	let ctx = this.canvasRef.getContext("2d")
    
    // THIS DOES NOT WORK:
  	//ctx.drawImage(new SvgSource({fill: "green"}), 50, 50);
    
    // NOR DOES THIS:
    //ctx.drawImage(this.svgRef, 50, 50);
    
    /* TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap. */
  }

  render() {
  return (
  <div>     
    {/* This works, inserting the SvgSource element directly - but that's not what I want. */}
    <SvgSource ref={s => this.svgRef = s} fill="blue" />
    
    {/* I want to use the SVG as an image source in this canvas. */}
  	<canvas 
      ref={
      c => this.canvasRef = c 
      /* NB: using older ref syntax because jsFiddle uses React .14 - use CreateRef with version 16 */
      } 
      width={200} 
      height={200} />
  </div>
  );
  }
}

// Our JSX SVG component that provides the custom image to use in the canvas
class SvgSource extends React.Component {
  render() {
    return (
      <svg width={100} height={100} viewBox="0 0 100 100">
        <circle cx={50} cy={50} r={25} fill={this.props.fill || "red"}/>
      </svg>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))
body {
  background: #20262E;
  padding: 20px;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  min-height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Чтобы уточнить: я знаю, как вставлять обычные изображения SVG в элементы canvas.Проблема заключается в преобразовании JSX SVG в действительный источник для drawImage в контексте Canvas, так что все это можно сделать в компонентах React.

1 Ответ

0 голосов
/ 20 февраля 2019

Это не очень изящный способ сделать это, но это то, чем я закончил:

class SvgSource extends React.Component {
    generateSvg() {
        return "data:image/svg+xml;base64," + 
            btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="25" fill="${this.props.fill}" /></svg>`);
    }

    render() {
        return (<img src={this.generateSvg()} />);
    }
}

Вместо того, чтобы делать SVG-объект JSX, я просто создаю его как строку, кодирующую вbase64 для использования в качестве URL-адреса данных.Затем я могу вернуть элемент <img> JSX из функции render(), чтобы использовать изображение непосредственно на странице.Когда мне нужно использовать его на холсте, я могу вызвать new SvgSource({fill: "green"}).generateSvg() напрямую, используя возвращенную строку в обычном (не JSX) <img> элементе src атрибута.

Я не могу найти лучшегоспособ визуализации SVG-разметки без фактического размещения на странице.

...