如何使用 React Konva Image 将画布重新绘制到自身上?
Posted
技术标签:
【中文标题】如何使用 React Konva Image 将画布重新绘制到自身上?【英文标题】:How to draw canvas back onto itself with React Konva Image? 【发布时间】:2020-01-29 07:19:21 【问题描述】:我正在尝试在react-konva
中实现this Stack Overflow questions' top answer,但卡在这行代码上:
ctx.drawImage(canvas,
blurredRect.x, blurredRect.y, blurredRect.width, blurredRect.height,
blurredRect.x, blurredRect.y, blurredRect.width, blurredRect.height
);
我们如何创建带有 9 个参数的 Image 组件?
我们将哪个canvas
元素添加到第二个Image
组件以及如何添加?
// draft code
import useImage from 'use-image';
const [image] = useImage(url, "anonymous");
<Stage width=width height=height>
<Layer>
<Image image=image width=width height=height></Image>
// second Image here with the blur?
<Rect fill="rgba(255,255,255,0.2)" x=80 y=80 width=200 height=200 />
</Layer>
</Stage>
【问题讨论】:
【参考方案1】:您不需要使用初始问题中的<Rect>
组件,因为您只需创建画布元素并将其用于<Image>
组件。
有很多方法可以做到这一点。这是如何使用钩子制作这样的画布的示例:
import React, Component from "react";
import render from "react-dom";
import Stage, Layer, Image from "react-konva";
import useImage from "use-image";
const useCanvas = () =>
const [image] = useImage(
"https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg"
);
const [canvas, setCanvas] = React.useState(null);
React.useEffect(() =>
// do this only when image is loaded
if (!image)
return;
var blurredRect =
x: 80,
y: 80,
height: 200,
width: 200,
spread: 10
;
const canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = image.width / 2;
canvas.height = image.height / 2;
// first pass draw everything
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
// next drawings will be blurred
ctx.filter = "blur(" + blurredRect.spread + "px)";
// draw the canvas over itself, cropping to our required rect
ctx.drawImage(
canvas,
blurredRect.x,
blurredRect.y,
blurredRect.width,
blurredRect.height,
blurredRect.x,
blurredRect.y,
blurredRect.width,
blurredRect.height
);
// draw the coloring (white-ish) layer, without blur
ctx.filter = "none"; // remove filter
ctx.fillStyle = "rgba(255,255,255,0.2)";
ctx.fillRect(
blurredRect.x,
blurredRect.y,
blurredRect.width,
blurredRect.height
);
setCanvas(canvas);
, [image]);
return canvas;
;
const App = () =>
const canvas = useCanvas();
return (
<Stage width=window.innerWidth height=window.innerHeight>
<Layer>
<Image image=canvas />
</Layer>
</Stage>
);
;
render(<App />, document.getElementById("root"));
https://codesandbox.io/s/react-konva-canvas-for-image-ypfmj
【讨论】:
以上是关于如何使用 React Konva Image 将画布重新绘制到自身上?的主要内容,如果未能解决你的问题,请参考以下文章
React Konva,blueimp-load-image 上传图像重新缩放
将画布从 React Konva 导出为 SVG 和 PDF?
Jest 使用 react + konva 和/或 react-konva 遇到了意外的令牌