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: image-mirroring in export preview and in exported svg (#5700)

Browse source 
Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Ryan Di 2022-09-18 05:02:13 +08:00 • committed by GitHub
parent 9929a2be6f
commit 3a776f8795
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 163 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/renderer/renderElement.ts
View file

@ -790,6 +790,9 @@ export const renderElement = (
context.save();
context.translate(cx, cy);
context.rotate(element.angle);
if (element.type === "image") {
context.scale(element.scale[0], element.scale[1]);
}
context.translate(-shiftX, -shiftY);
if (shouldResetImageFilter(element, renderConfig)) {
@ -950,6 +953,8 @@ export const renderElementToSvg = (
break;
}
case "image": {
const width = Math.round(element.width);
const height = Math.round(element.height);
const fileData =
isInitializedImageElement(element) && files[element.fileId];
if (fileData) {
@ -978,17 +983,34 @@ export const renderElementToSvg = (
use.setAttribute("filter", IMAGE_INVERT_FILTER);
}
use.setAttribute("width", `${Math.round(element.width)}`);
use.setAttribute("height", `${Math.round(element.height)}`);
use.setAttribute("width", `${width}`);
use.setAttribute("height", `${height}`);
use.setAttribute(
// We first apply `scale` transforms (horizontal/vertical mirroring)
// on the <use> element, then apply translation and rotation
// on the <g> element which wraps the <use>.
// Doing this separately is a quick hack to to work around compositing
// the transformations correctly (the transform-origin was not being
// applied correctly).
if (element.scale[0] !== 1 || element.scale[1] !== 1) {
const translateX = element.scale[0] !== 1 ? -width : 0;
const translateY = element.scale[1] !== 1 ? -height : 0;
use.setAttribute(
"transform",
`scale(${element.scale[0]}, ${element.scale[1]}) translate(${translateX} ${translateY})`,
);
}
const g = svgRoot.ownerDocument!.createElementNS(SVG_NS, "g");
g.appendChild(use);
g.setAttribute(
"transform",
`translate(${offsetX || 0} ${
offsetY || 0
}) rotate(${degree} ${cx} ${cy})`,
);
root.appendChild(use);
root.appendChild(g);
}
break;
}