Compare commits

..

No commits in common. "4a7dd980bd51a35cc4c61f3666c92de4b0012a3c" and "525c9b0572a30bf687dd05c5d5d58b6003e22303" have entirely different histories.

1 changed files with 49 additions and 35 deletions

View File

@ -1323,19 +1323,26 @@ let handleAnimate = async (result: any) => {
let middleDuration = duration / num1; let middleDuration = duration / num1;
for (let i = 0; i < numTriangles; i++) { for (let i = 0; i < numTriangles; i++) {
let triangle = draw.polygon('0,-1 4,0 0,1').fill('lightgreen').stroke({ color: 'lightgreen', width: 0.2 }) let triangle = draw
.polygon("0,-2 6,0 0,2")
.fill("lightgreen")
.stroke({ color: "lightgreen", width: 0.2 });
let triangleanimate = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion') let triangleanimate = document.createElementNS(
triangleanimate.setAttribute('path', pointsValue) "http://www.w3.org/2000/svg",
triangleanimate.setAttribute('dur', `${spacingDuration}s`) "animateMotion"
let startTime = middleDuration - (duration / numTriangles) * i - i * spacingDuration );
triangleanimate.setAttribute('begin', `${startTime}s`) triangleanimate.setAttribute("path", pointsValue);
triangleanimate.setAttribute('fill', 'remove') triangleanimate.setAttribute("dur", `${spacingDuration}s`);
triangleanimate.setAttribute('rotate', 'auto') let startTime =
triangleanimate.setAttribute('repeatCount', 'indefinite') middleDuration - (duration / numTriangles) * i - i * spacingDuration;
triangle.node.appendChild(triangleanimate) triangleanimate.setAttribute("begin", `${startTime}s`);
triangleanimate.setAttribute("fill", "remove");
triangleanimate.setAttribute("rotate", "auto");
triangleanimate.setAttribute("repeatCount", "indefinite");
triangle.node.appendChild(triangleanimate);
lineDom.add(triangle) lineDom.add(triangle);
} }
let rect = draw.rect(30, 30).fill("#000").move(-5, -10); let rect = draw.rect(30, 30).fill("#000").move(-5, -10);
lineDom.add(rect); lineDom.add(rect);
@ -1455,22 +1462,29 @@ let handleAnimate = async (result: any) => {
let duration = numTriangles / num1; let duration = numTriangles / num1;
let middleDuration = duration / num1; let middleDuration = duration / num1;
for (let i = 0; i < numTriangles; i++) { for (let i = 0; i < numTriangles; i++) {
let triangle = draw.polygon('0,-1 -4,0 0,1').fill('lightgreen').stroke({ color: 'lightgreen', width: 0.2 }) let triangle = draw
.polygon("0,-2 -6,0 0,2")
.fill("lightgreen")
.stroke({ color: "lightgreen", width: 0.2 });
let triangleanimate = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion') let triangleanimate = document.createElementNS(
triangleanimate.setAttribute('path', pointsValue) "http://www.w3.org/2000/svg",
triangleanimate.setAttribute('dur', `${spacingDuration}s`) "animateMotion"
let startTime = middleDuration - (duration / numTriangles) * i - i * spacingDuration );
triangleanimate.setAttribute('begin', `${startTime}s`) triangleanimate.setAttribute("path", pointsValue);
triangleanimate.setAttribute('fill', 'remove') triangleanimate.setAttribute("dur", `${spacingDuration}s`);
triangleanimate.setAttribute('rotate', 'auto') let startTime =
triangleanimate.setAttribute('repeatCount', 'indefinite') middleDuration - (duration / numTriangles) * i - i * spacingDuration;
triangleanimate.setAttribute('keyPoints', '1;0') triangleanimate.setAttribute("begin", `${startTime}s`);
triangleanimate.setAttribute('keyTimes', '0;1') triangleanimate.setAttribute("fill", "remove");
triangleanimate.setAttribute('calcMode', 'linear') triangleanimate.setAttribute("rotate", "auto");
triangle.node.appendChild(triangleanimate) triangleanimate.setAttribute("repeatCount", "indefinite");
triangleanimate.setAttribute("keyPoints", "1;0");
triangleanimate.setAttribute("keyTimes", "0;1");
triangleanimate.setAttribute("calcMode", "linear");
triangle.node.appendChild(triangleanimate);
lineDom.add(triangle) lineDom.add(triangle);
} }
let rect = draw.rect(30, 30).fill("#000").move(-5, -10); let rect = draw.rect(30, 30).fill("#000").move(-5, -10);
lineDom.add(rect); lineDom.add(rect);
@ -1492,12 +1506,12 @@ let handleAnimate = async (result: any) => {
// 线 // 线
// 线 // 线
draw draw
.line(centerX, centerY, centerX + 10, centerY - 10) .line(centerX, centerY, centerX + 20, centerY - 20)
.attr({ .attr({
'stroke-width': 0.1, "stroke-width": 0.1,
id: 'load_' + data.load_id, id: "load_" + data.load_id,
stroke: 'green', stroke: "green",
'stroke-dasharray': '1,1' "stroke-dasharray": "3,3",
}) })
.font({ size: "8" }); .font({ size: "8" });
// //
@ -1508,11 +1522,11 @@ let handleAnimate = async (result: any) => {
).toFixed(4)} kVar` ).toFixed(4)} kVar`
) )
.attr({ .attr({
x: centerX + 10, x: centerX + 20,
y: centerY - 10, y: centerY - 20,
id: 'load_text' + data.load_id, id: "load_text" + data.load_id,
'font-size': '2', "font-size": "4",
leading: '0.9' leading: "0.9",
}) })
.fill("green"); .fill("green");
} }