smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: Prevent gradual canvas misalignment (#3833)

Browse source 
Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Hargobind S. Khalsa 2021-07-14 04:29:22 -07:00 • committed by GitHub
parent 0749d2c1f3
commit 9581c45522
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 48 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/renderer/renderElement.ts
View file

@ -102,8 +102,8 @@ const generateElementCanvas = (
padding * zoom.value * 2;
}
context.save();
context.translate(padding * zoom.value, padding * zoom.value);
context.scale(
window.devicePixelRatio * zoom.value,
window.devicePixelRatio * zoom.value,
@ -112,12 +112,7 @@ const generateElementCanvas = (
const rc = rough.canvas(canvas);
drawElementOnCanvas(element, rc, context);
context.translate(-(padding * zoom.value), -(padding * zoom.value));
context.scale(
1 / (window.devicePixelRatio * zoom.value),
1 / (window.devicePixelRatio * zoom.value),
);
context.restore();
return {
element,
canvas,
@ -175,11 +170,9 @@ const drawElementOnCanvas = (
document.body.appendChild(context.canvas);
}
context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
const font = context.font;
context.save();
context.font = getFontString(element);
const fillStyle = context.fillStyle;
context.fillStyle = element.strokeColor;
const textAlign = context.textAlign;
context.textAlign = element.textAlign as CanvasTextAlign;
// Canvas does not support multiline text by default
@ -199,9 +192,7 @@ const drawElementOnCanvas = (
(index + 1) * lineHeight - verticalOffset,
);
}
context.fillStyle = fillStyle;
context.font = font;
context.textAlign = textAlign;
context.restore();
if (shouldTemporarilyAttach) {
context.canvas.remove();
}
@ -518,6 +509,7 @@ const drawElementFromCanvas = (
const cx = ((x1 + x2) / 2 + sceneState.scrollX) * window.devicePixelRatio;
const cy = ((y1 + y2) / 2 + sceneState.scrollY) * window.devicePixelRatio;
context.save();
context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);
context.translate(cx, cy);
context.rotate(element.angle);
@ -531,9 +523,7 @@ const drawElementFromCanvas = (
elementWithCanvas.canvas!.width / elementWithCanvas.canvasZoom,
elementWithCanvas.canvas!.height / elementWithCanvas.canvasZoom,
);
context.rotate(-element.angle);
context.translate(-cx, -cy);
context.scale(window.devicePixelRatio, window.devicePixelRatio);
context.restore();
// Clear the nested element we appended to the DOM
};
@ -548,18 +538,14 @@ export const renderElement = (
const generator = rc.generator;
switch (element.type) {
case "selection": {
context.save();
context.translate(
element.x + sceneState.scrollX,
element.y + sceneState.scrollY,
);
const fillStyle = context.fillStyle;
context.fillStyle = "rgba(0, 0, 255, 0.10)";
context.fillRect(0, 0, element.width, element.height);
context.fillStyle = fillStyle;
context.translate(
-element.x - sceneState.scrollX,
-element.y - sceneState.scrollY,
);
context.restore();
break;
}
case "freedraw": {
@ -577,13 +563,12 @@ export const renderElement = (
const cy = (y1 + y2) / 2 + sceneState.scrollY;
const shiftX = (x2 - x1) / 2 - (element.x - x1);
const shiftY = (y2 - y1) / 2 - (element.y - y1);
context.save();
context.translate(cx, cy);
context.rotate(element.angle);
context.translate(-shiftX, -shiftY);
drawElementOnCanvas(element, rc, context);
context.translate(shiftX, shiftY);
context.rotate(-element.angle);
context.translate(-cx, -cy);
context.restore();
}
break;
@ -607,13 +592,12 @@ export const renderElement = (
const cy = (y1 + y2) / 2 + sceneState.scrollY;
const shiftX = (x2 - x1) / 2 - (element.x - x1);
const shiftY = (y2 - y1) / 2 - (element.y - y1);
context.save();
context.translate(cx, cy);
context.rotate(element.angle);
context.translate(-shiftX, -shiftY);
drawElementOnCanvas(element, rc, context);
context.translate(shiftX, shiftY);
context.rotate(-element.angle);
context.translate(-cx, -cy);
context.restore();
}
break;
}