82 lines
1.8 KiB
TypeScript
82 lines
1.8 KiB
TypeScript
import { createCanvas, Image } from "@gfx/canvas";
|
|
|
|
function loadImage(src: string): Promise<Image> {
|
|
return new Promise((resolve, reject) => {
|
|
if (!src.startsWith("data:image/png;base64,")) {
|
|
console.log("src", src);
|
|
}
|
|
const img = new Image();
|
|
img.onload = () => resolve(img);
|
|
img.onerror = () => {
|
|
console.log(src);
|
|
reject();
|
|
};
|
|
img.src = src;
|
|
});
|
|
}
|
|
|
|
export async function createIsometricCube(
|
|
face1Src: string,
|
|
face2Src: string,
|
|
face3Src: string,
|
|
width: number = 96,
|
|
) {
|
|
const canvasWidth = width; // Set a size for the canvas
|
|
const canvasHeight = Math.ceil(width / .866);
|
|
const canvas = createCanvas(canvasWidth, canvasHeight);
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
try {
|
|
const [face1, face2, face3] = await Promise.all([
|
|
loadImage(face1Src),
|
|
loadImage(face2Src),
|
|
loadImage(face3Src),
|
|
]).catch();
|
|
|
|
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
|
|
ctx.setTransform(
|
|
1,
|
|
0,
|
|
Math.tan(degToRad(30)),
|
|
1,
|
|
0,
|
|
canvasWidth / 3.5,
|
|
);
|
|
ctx.drawImage(face1, 0, 0, canvasWidth / 2, canvasHeight / 2);
|
|
|
|
// Face 2
|
|
ctx.setTransform(
|
|
1,
|
|
0,
|
|
-Math.tan(degToRad(30)),
|
|
1,
|
|
canvasWidth / 2,
|
|
canvasHeight / 2,
|
|
);
|
|
ctx.drawImage(face2, 0, 0, canvasWidth / 2, canvasHeight / 2);
|
|
|
|
// Face 3
|
|
ctx.setTransform(
|
|
1,
|
|
-Math.tan(degToRad(60)),
|
|
Math.tan(degToRad(30)),
|
|
1,
|
|
canvasWidth / 2,
|
|
0,
|
|
);
|
|
ctx.drawImage(face3, 0, 0, canvasWidth / 2, canvasWidth / 3.5);
|
|
|
|
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
} catch (e) {
|
|
// console.log("error", e);
|
|
}
|
|
|
|
const b64 = canvas.toDataURL("png");
|
|
return b64;
|
|
}
|
|
|
|
function degToRad(deg: number) {
|
|
return deg * (Math.PI / 180);
|
|
}
|