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.5
Some checks failed
CI / build (push) Failing after 16s
Details

Browse source 
Support ImageData
This commit is contained in:
Andrey Kernichniy 2026-03-15 01:00:19 +07:00
parent c0150f85fa
commit 6e062dcadb
6 changed files with 38 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

18
lib/src/artist.ts
View file

@ -155,7 +155,7 @@ export class Artist {
this._context.restore(); this._context.restore();
} }
drawImage(source: HTMLImageElement, position: IPoint, size: ISize) { drawImageElement(source: HTMLImageElement, position: IPoint, size: ISize) {
this._context.save(); this._context.save();
const scaleY = size.height / source.naturalHeight; const scaleY = size.height / source.naturalHeight;
const scaleX = size.width / source.naturalWidth; const scaleX = size.width / source.naturalWidth;
@ -167,7 +167,7 @@ export class Artist {
this._context.restore(); this._context.restore();
} }
drawImage2(source: ImageBitmap, position: IPoint, size: ISize) { drawImageBitmap(source: ImageBitmap, position: IPoint, size: ISize) {
this._context.save(); this._context.save();
const scaleY = size.height / source.height; const scaleY = size.height / source.height;
const scaleX = size.width / source.width; const scaleX = size.width / source.width;
@ -179,6 +179,20 @@ export class Artist {
this._context.restore(); this._context.restore();
} }
drawImageData(source: ImageData, position: IPoint, size: ISize) {
const osc = new OffscreenCanvas(source.width, source.height).getContext("2d");
osc.putImageData(source, 0, 0);
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(osc.canvas, -source.width / 2, -source.height / 2);
this._context.restore();
}
drawPath(path: string) { drawPath(path: string) {
const path2d = new Path2D(path); const path2d = new Path2D(path);
this._context.stroke(path2d); this._context.stroke(path2d);

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

@ -93,13 +93,19 @@ export class Canvas2DRenderer implements IRenderer {
this._artist.setTransform(dn.transform); this._artist.setTransform(dn.transform);
if (dn.source instanceof HTMLImageElement) { if (dn.source instanceof HTMLImageElement) {
this._artist.drawImage( this._artist.drawImageElement(
dn.source, dn.source,
{ x: dn.rectangle.x, y: dn.rectangle.y }, { x: dn.rectangle.x, y: dn.rectangle.y },
{ width: dn.rectangle.width, height: dn.rectangle.height }, { width: dn.rectangle.width, height: dn.rectangle.height },
); );
} else if (dn.source instanceof ImageBitmap) { } else if (dn.source instanceof ImageBitmap) {
this._artist.drawImage2( this._artist.drawImageBitmap(
dn.source,
{ x: dn.rectangle.x, y: dn.rectangle.y },
{ width: dn.rectangle.width, height: dn.rectangle.height },
);
} else if (dn.source instanceof ImageData) {
this._artist.drawImageData(
dn.source, dn.source,
{ x: dn.rectangle.x, y: dn.rectangle.y }, { x: dn.rectangle.x, y: dn.rectangle.y },
{ width: dn.rectangle.width, height: dn.rectangle.height }, { width: dn.rectangle.width, height: dn.rectangle.height },

1
lib/src/index.ts
View file

@ -0,0 +1 @@
export * from "./canvas-2d-renderer";

6
lib/src/package.json
View file

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

16
package-lock.json generated
View file

@ -9,8 +9,8 @@
"version": "0.0.0", "version": "0.0.0",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@gxc-solutions/math": "^0.0.2", "@gxc-solutions/math": "^0.0.3",
"@gxc-solutions/renderer-base": "^0.0.10" "@gxc-solutions/renderer-base": "^0.0.11"
}, },
"devDependencies": { "devDependencies": {
"@eslint/eslintrc": "^3.3.4", "@eslint/eslintrc": "^3.3.4",
@ -696,14 +696,14 @@
} }
}, },
"node_modules/@gxc-solutions/math": { "node_modules/@gxc-solutions/math": {
"version": "0.0.2", "version": "0.0.3",
"resolved": "https://npm.gxc-solutions.ru/@gxc-solutions/math/-/math-0.0.2.tgz", "resolved": "https://npm.gxc-solutions.ru/@gxc-solutions/math/-/math-0.0.3.tgz",
"integrity": "sha512-R6zYvbspis+XoHZ7lwyVLAUGZkJwivbeo94VtN7cSZzOA86AgVev+UQeHt9S1Ua4d1FwgxYVasck1/l5WXR7CQ==" "integrity": "sha512-B39/C/3YzfSbLgsf0sBpZILTSO8TIZVbh6tv3pXulG1qDL1tg41mLjp7M263MsC7ARzj7ME8WWsniBj0C4L+XA=="
}, },
"node_modules/@gxc-solutions/renderer-base": { "node_modules/@gxc-solutions/renderer-base": {
"version": "0.0.10", "version": "0.0.11",
"resolved": "https://npm.gxc-solutions.ru/@gxc-solutions/renderer-base/-/renderer-base-0.0.10.tgz", "resolved": "https://npm.gxc-solutions.ru/@gxc-solutions/renderer-base/-/renderer-base-0.0.11.tgz",
"integrity": "sha512-DaGo2ii+Vqz5Mk20zXwNXMpxMCoF7fE8EbC+V37qEu+b/YVLtk7/N//1PyMl43hIIMlGNRps81dfJhPkCgSbdQ==", "integrity": "sha512-JD3ubs5TA7eDV3zqMKx5c3in5/9z9C3YdK0e2cgWya8/LT/HoLl6RdbLqZ0I4xngRksyd/clSoXCWcbtROj8kg==",
"peerDependencies": { "peerDependencies": {
"@gxc-solutions/math": "^0.0.2" "@gxc-solutions/math": "^0.0.2"
} }

4
package.json
View file

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