@ edv4h/ usketch- shape- utils
uSketch v2 → 形状 → {}。
サードパーティが @acme/usketch-plugin-shape-foo * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ***********************。
反应 QQ 形状 QQ。
安装
pnpm add @edv4h/usketch-shape-utils @edv4h/usketch-shared
• API
getBounds(data: ShapeData): BoundingBox
形状 ShapeDefinition.getBounds OK,没事。
命中测试
| 関数 | 页:1 |
|---|---|
aabbHitTest(data, point) | 阿拉伯裔美国人 |
ellipseHitTest(data, point) | 楕円との当たり判定 |
lineHitTest(data, point, tolerance?) | qq (xq 容忍度 : 4px) |
pointInPolygon(point, polygon) | 任意多角形との当たり判定(三角形・六角形・星形など) |
回転に対応したい場合は、@edv4h/usketch-shared の withRotation(hitTest) でラップする。
createResize(minW, minH): ResizeFn
8 方向 (se 编号 : nw 编号 : ne 编号 : sw 编号 : e 编号 : w 编号 : n 编号 : s) 缩放。
GPU 原始语言
(原始内容存档于2017-03-21). WebGPU QQ原始版。
| 関数 | 喜欢的 |
|---|---|
rectGpuPrimitive(data) | rect |
roundedRectGpuPrimitive(data) | rect(橡皮拉迪乌斯) |
ellipseGpuPrimitive(data) | ellipse |
lineGpuPrimitive(data) | polyline |
使用例
import { DEFAULT_STYLE, type ShapeData, withRotation } from "@edv4h/usketch-shared";
import { createResize, getBounds, pointInPolygon } from "@edv4h/usketch-shape-utils";
function getHexagonPoints(data: ShapeData) {
const cx = data.x + data.width / 2;
const cy = data.y + data.height / 2;
return Array.from({ length: 6 }, (_, i) => {
const angle = (Math.PI / 3) * i - Math.PI / 2;
return {
x: cx + (data.width / 2) * Math.cos(angle),
y: cy + (data.height / 2) * Math.sin(angle),
};
});
}
export const hexagonDefinition = {
render: (data: ShapeData) => (
<polygon
points={getHexagonPoints(data).map((p) => `${p.x},${p.y}`).join(" ")}
fill={data.style.fill}
/>
),
getBounds,
hitTest: withRotation((data, point) => pointInPolygon(point, getHexagonPoints(data))),
resize: createResize(10, 10),
createDefault: ({ id, x, y }) => ({
id,
type: "hexagon",
x,
y,
width: 120,
height: 104,
style: { ...DEFAULT_STYLE },
}),
};
プラグインとしての組み込み方は apps/docs + 作者为 + を参照。
许可证
麻省理工学院