本文整理匯總了TypeScript中@cycle/dom.svg.path方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript svg.path方法的具體用法？TypeScript svg.path怎麽用？TypeScript svg.path使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@cycle/dom.svg的用法示例。
在下文中一共展示了svg.path方法的3個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: renderEdgeType1
function renderEdgeType1(vw: Dagre.Edge, graph: Dagre.Graph): VNode | null {
const edgeData: StreamGraphEdge = (graph as any).edge(vw.v, vw.w);
if (!edgeData.points) {
return null;
}
const points = edgeData.points.map(({x, y}) =>
({ x: x + DIAGRAM_PADDING_H, y: y + DIAGRAM_PADDING_V }),
);
// Make arrow tail not touch origin stream
points[0].x = points[0].x * 0.4 + points[1].x * 0.6;
points[0].y = points[0].y * 0.4 + points[1].y * 0.6;
const x0 = points[0].x, x1 = points[1].x, y0 = points[0].y, y1 = points[1].y;
if (Math.sqrt((x0 - x1) * (x0 - x1) + (y0 - y1) * (y0 - y1)) < 6) {
points.shift();
}
return svg.path({
class: {
[styles.edgeType1Style]: true,
},
attrs: {
d: `M ${points.map(({ x, y }) => `${x} ${y}`).join(' ')}`,
},
});
}示例2: renderArrowHead
function renderArrowHead(vw: Dagre.Edge): VNode {
return svg.defs([
svg.marker({
attrs: {
id: `arrowhead${vw.v}-${vw.w}`,
viewBox: '0 0 10 10',
refX: '9',
refY: '5',
markerUnits: 'strokeWidth',
markerWidth: '8',
markerHeight: '6',
orient: 'auto',
},
}, [
svg.path({
class: {
[styles.edgeArrowHeadStyle]: true,
},
attrs: {
d: 'M 0 0 L 10 5 L 0 10 z',
},
}),
]),
]);
}示例3: renderEdgeType2
function renderEdgeType2(vw: Dagre.Edge, graph: Dagre.Graph): VNode | null {
const edgeData: StreamGraphEdge = (graph as any).edge(vw.v, vw.w);
if (!edgeData.points) {
return null;
}
const points = edgeData.points
.map(({x, y}) => ({ x: x + DIAGRAM_PADDING_H, y: y + DIAGRAM_PADDING_V }));
return svg.g([
svg.path({
class: {
[styles.edgeType2Style]: true,
},
attrs: {
d: `M ${points.map(({ x, y }) => `${x} ${y}`).join(' ')}`,
'marker-end': `url("#arrowhead${vw.v}-${vw.w}")`,
},
}),
renderArrowHead(vw),
]);
}