Do not regenerate shapes when moving
This commit is contained in:
parent
bd515f7e50
commit
f8873dd56b
31
src/index.js
31
src/index.js
@ -39,30 +39,29 @@ function generateShape(element) {
|
||||
context.fillStyle = fillStyle;
|
||||
};
|
||||
} else if (element.type === "rectangle") {
|
||||
const shape = generator.rectangle(
|
||||
element.x,
|
||||
element.y,
|
||||
element.width,
|
||||
element.height
|
||||
);
|
||||
const shape = generator.rectangle(0, 0, element.width, element.height);
|
||||
element.draw = (rc, context) => {
|
||||
context.translate(element.x, element.y);
|
||||
rc.draw(shape);
|
||||
context.translate(-element.x, -element.y);
|
||||
};
|
||||
} else if (element.type === "ellipse") {
|
||||
const shape = generator.ellipse(
|
||||
element.x + element.width / 2,
|
||||
element.y + element.height / 2,
|
||||
element.width / 2,
|
||||
element.height / 2,
|
||||
element.width,
|
||||
element.height
|
||||
);
|
||||
element.draw = (rc, context) => {
|
||||
context.translate(element.x, element.y);
|
||||
rc.draw(shape);
|
||||
context.translate(-element.x, -element.y);
|
||||
};
|
||||
} else if (element.type === "arrow") {
|
||||
const x1 = element.x;
|
||||
const y1 = element.y;
|
||||
const x2 = element.x + element.width;
|
||||
const y2 = element.y + element.height;
|
||||
const x1 = 0;
|
||||
const y1 = 0;
|
||||
const x2 = element.width;
|
||||
const y2 = element.height;
|
||||
|
||||
const size = 30; // pixels
|
||||
const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
|
||||
@ -76,13 +75,18 @@ function generateShape(element) {
|
||||
const [x4, y4] = rotate(xs, ys, x2, y2, (angle * Math.PI) / 180);
|
||||
|
||||
const shapes = [
|
||||
generator.line(x1, y1, x2, y2),
|
||||
// \
|
||||
generator.line(x3, y3, x2, y2),
|
||||
// -----
|
||||
generator.line(x1, y1, x2, y2),
|
||||
// /
|
||||
generator.line(x4, y4, x2, y2)
|
||||
];
|
||||
|
||||
element.draw = (rc, context) => {
|
||||
context.translate(element.x, element.y);
|
||||
shapes.forEach(shape => rc.draw(shape));
|
||||
context.translate(-element.x, -element.y);
|
||||
};
|
||||
return;
|
||||
} else if (element.type === "text") {
|
||||
@ -165,7 +169,6 @@ function App() {
|
||||
else if (event.key === "ArrowRight") element.x += step;
|
||||
else if (event.key === "ArrowUp") element.y -= step;
|
||||
else if (event.key === "ArrowDown") element.y += step;
|
||||
generateShape(element);
|
||||
}
|
||||
});
|
||||
drawScene();
|
||||
|
Loading…
x
Reference in New Issue
Block a user