javascript - React and JSX plus Hiccup custom implementation
问题描述
I have found a declarative-canvas hiccup implementation, what works like that:
const canvas: HTMLCanvasElement = document.createElement("canvas");
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d")!;
const canvas: HTMLCanvasElement = document.createElement("canvas");
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d")!;
draw(
ctx,
['g',
{transform: `translate(10, 0)`},
["rect", {stroke: "red"}, [0, 0], 30, 30],
["circle", {stroke: "blue"}, [10, 10], 6]
])
I'd like to write this inside a react JSX file taking the advantage of typescript prop check writing my own Group
, Rect
, and Circle
React component.
Something like:
<div>
<DeclarativeCanvas>
<Group transfom={`translate(10, 0)`}>
<Rect stroke={"red"} x={0} y={0} width={30} height={30} />
<Circle stroke={"red"} x={0} y={0} radius={6} />
</Group>
</DeclarativeCanvas>
</div>
Do anyone has any kind of hint or suggestion?
解决方案
推荐阅读
- express - Here-API 401:“无效的 app_id app_code 组合”
- python - 共轭与范数平方不同的 Python Sympy 点
- python - 如何在 Django / 模板中增加下一条记录
- c++ - 加速求解一维薛定谔方程的 C++ 代码
- javascript - 带有 2 个提交按钮(保存和删除)的 Wordpress Ajax 表单提交如何让第二个按钮工作
- operating-system - CPU 爆发时间长于量子?
- npm - node_modules 中的更改不生效
- c++ - 现代 CMake,使用 target_link_library 作为外部二进制库
- css - CSS Iris 擦拭效果 - (隧道尽头的光)
- regex - 正则表达式匹配 1 或 2 次出现