[英]Animating a GIF on Canvas using react-konva
我正在嘗試使用 react 為應用程序創建 UI。 我正在使用 react-konva 來創建 2D 畫布。 我已經想出了如何將圖像導入到此畫布上,但在嘗試為 gif 設置動畫時遇到問題。 有關於如何在 konva 中執行此操作的文檔,但我似乎無法將其轉換為 react-konva。
此處提供了在 konva 中執行此操作的文檔。
import React from "react";
import { render } from "react-dom";
import { Stage, Layer, Image } from "react-konva";
// gifler will be imported into global window object
import "gifler";
const GIF = ({ src }) => {
const imageRef = React.useRef(null);
const canvas = React.useMemo(() => {
const node = document.createElement("canvas");
return node;
}, []);
React.useEffect(() => {
// save animation instance to stop it on unmount
let anim;
window.gifler(src).get(a => {
anim = a;
anim.animateInCanvas(canvas);
anim.onDrawFrame = (ctx, frame) => {
ctx.drawImage(frame.buffer, frame.x, frame.y);
imageRef.current.getLayer().draw();
};
});
return () => anim.stop();
}, [src, canvas]);
return <Image image={canvas} ref={imageRef} />;
};
class App extends React.Component {
render() {
return (
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<GIF src="https://konvajs.org/assets/yoda.gif" />
</Layer>
</Stage>
);
}
}
render(<App />, document.getElementById("root"));
演示: https : //codesandbox.io/s/react-konva-gif-animation-p86qr
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.