У меня есть приложение 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.