diff --git a/src/index.js b/src/index.js index 00d1a85a..ede46070 100644 --- a/src/index.js +++ b/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();