gxc-solutions/gxc-renderer-canvas-2d
1
0
Fork 0
generated from gxc-solutions/gxc-template-repo
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Release package version 0.0.04
All checks were successful
CI / build (push) Successful in 23s
Details

Browse source 
Support for render ImageBitmap
This commit is contained in:
Andrey Kernichniy 2026-03-14 18:16:22 +07:00
parent 3c3b13e22f
commit c0150f85fa
5 changed files with 40 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

12
lib/src/artist.ts
View file

@ -167,6 +167,18 @@ export class Artist {
this._context.restore();
}
drawImage2(source: ImageBitmap, position: IPoint, size: ISize) {
this._context.save();
const scaleY = size.height / source.height;
const scaleX = size.width / source.width;
this._context.translate(position.x + size.width / 2, position.y + size.height / 2);
this._context.scale(scaleY, scaleX);
this._context.drawImage(source, -source.width / 2, -source.height / 2);
this._context.restore();
}
drawPath(path: string) {
const path2d = new Path2D(path);
this._context.stroke(path2d);

9
lib/src/canvas-2d-renderer.ts
View file

@ -92,11 +92,20 @@ export class Canvas2DRenderer implements IRenderer {
this._context.globalCompositeOperation = dn.blendMode as GlobalCompositeOperation;
this._artist.setTransform(dn.transform);
if (dn.source instanceof HTMLImageElement) {
this._artist.drawImage(
dn.source,
{ x: dn.rectangle.x, y: dn.rectangle.y },
{ width: dn.rectangle.width, height: dn.rectangle.height },
);
} else if (dn.source instanceof ImageBitmap) {
this._artist.drawImage2(
dn.source,
{ x: dn.rectangle.x, y: dn.rectangle.y },
{ width: dn.rectangle.width, height: dn.rectangle.height },
);
}
this._context.restore();
}
if (isRectangleDrawObject(leaf)) {

6
lib/src/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@gxc-solutions/renderer-canvas-2d",
"version": "0.0.3",
"version": "0.0.4",
"main": "index.js",
"author": "GXC Solutions",
"publishConfig": {
@ -8,7 +8,7 @@
"registry": "https://npm.gxc-solutions.ru"
},
"peerDependencies": {
"@gxc-solutions/math": "^0.0.1",
"@gxc-solutions/renderer-base": "^0.0.9"
"@gxc-solutions/math": "^0.0.2",
"@gxc-solutions/renderer-base": "^0.0.10"
}
}

18
package-lock.json generated
View file

@ -9,8 +9,8 @@
"version": "0.0.0",
"license": "ISC",
"dependencies": {
"@gxc-solutions/math": "^0.0.1",
"@gxc-solutions/renderer-base": "^0.0.9"
"@gxc-solutions/math": "^0.0.2",
"@gxc-solutions/renderer-base": "^0.0.10"
},
"devDependencies": {
"@eslint/eslintrc": "^3.3.4",
@ -696,16 +696,16 @@
}
},
"node_modules/@gxc-solutions/math": {
"version": "0.0.1",
"resolved": "https://npm.gxc-solutions.ru/@gxc-solutions/math/-/math-0.0.1.tgz",
"integrity": "sha512-m6lxTkjXkyaUoI3+cJKpgt/AQlyApLSJ2p9D2EJ9+XzHCSjOWs29GzczPLgopYdLEWYN/YPr77V4CScGpR7qxw=="
"version": "0.0.2",
"resolved": "https://npm.gxc-solutions.ru/@gxc-solutions/math/-/math-0.0.2.tgz",
"integrity": "sha512-R6zYvbspis+XoHZ7lwyVLAUGZkJwivbeo94VtN7cSZzOA86AgVev+UQeHt9S1Ua4d1FwgxYVasck1/l5WXR7CQ=="
},
"node_modules/@gxc-solutions/renderer-base": {
"version": "0.0.9",
"resolved": "https://npm.gxc-solutions.ru/@gxc-solutions/renderer-base/-/renderer-base-0.0.9.tgz",
"integrity": "sha512-aLu3eTyzDcGQw+FsYt25MNg/6gNORXa8FynUX5rtEFinmdFEDdqxOr08dhFViw1FIT3ZdYtJbY9aegFK3V/OcA==",
"version": "0.0.10",
"resolved": "https://npm.gxc-solutions.ru/@gxc-solutions/renderer-base/-/renderer-base-0.0.10.tgz",
"integrity": "sha512-DaGo2ii+Vqz5Mk20zXwNXMpxMCoF7fE8EbC+V37qEu+b/YVLtk7/N//1PyMl43hIIMlGNRps81dfJhPkCgSbdQ==",
"peerDependencies": {
"@gxc-solutions/math": "^0.0.1"
"@gxc-solutions/math": "^0.0.2"
}
},
"node_modules/@humanfs/core": {

4
package.json
View file

@ -31,7 +31,7 @@
"vite": "^7.3.1"
},
"dependencies": {
"@gxc-solutions/math": "^0.0.1",
"@gxc-solutions/renderer-base": "^0.0.9"
"@gxc-solutions/math": "^0.0.2",
"@gxc-solutions/renderer-base": "^0.0.10"
}
}