Skip to content

Commit

Permalink
chore: updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@triniwiz
triniwiz committed Nov 24, 2024
1 parent 638d210 commit 24162b6
Show file tree
Hide file tree
Showing 9 changed files with 421 additions and 218 deletions.
59 changes: 57 additions & 2 deletions crates/canvas-c/src/c2d/context.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2469,8 +2469,63 @@ pub extern "C" fn canvas_native_context_round_rect(
) {
let radii = unsafe { std::slice::from_raw_parts(radii, size) };
let context = unsafe { &mut *context };
if radii.len() == 8 {
context.context.round_rect(x, y, width, height, radii)


let size = radii.len();
if size == 0 {
return;
}
/*
[all-corners]
[top-left-and-bottom-right, top-right-and-bottom-left]
[top-left, top-right-and-bottom-left, bottom-right]
[top-left, top-right, bottom-right, bottom-left]
*/
let mut top_left = 0.;
let mut top_right = 0.;
let mut bottom_right = 0.;
let mut bottom_left = 0.;

match size {
1 => {
top_left = radii[0];
top_right = top_left;
bottom_right = top_left;
bottom_left = top_left;
}
2 => {
top_left = radii[0];
top_right = radii[1];
bottom_right = top_left;
bottom_left = top_right;
}

3 => {
top_left = radii[0];
top_right = radii[1];
bottom_right = radii[2];
bottom_left = top_right
}
4 => {
top_left = radii[0];
top_right = radii[1];
bottom_right = radii[2];
bottom_left = radii[3];
}
_ => {}
}

if size > 0 && size <= 4 {
context.context.round_rect(x, y, width, height, &[
top_left,
top_left,
top_right,
top_right,
bottom_right,
bottom_right,
bottom_left,
bottom_left,
]);
}
}

Expand Down
2 changes: 0 additions & 2 deletions crates/canvas-c/src/c2d/path.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,8 +211,6 @@ pub extern "C" fn canvas_native_path_round_rect(
let radii = unsafe { std::slice::from_raw_parts(radii, size) };
let path = unsafe { &mut *path };

println!("radii: {:?}", radii);

let size = radii.len();
if size == 0 {
return;
Expand Down
145 changes: 64 additions & 81 deletions napi/canvas-napi/deno.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,6 @@ export class ApplicationDelegate extends NSObject {
window.makeKeyAndOrderFront(this);

NSApp.activateIgnoringOtherApps(false);

doTheThing();
}

/**
Expand Down Expand Up @@ -115,15 +113,71 @@ export class ViewController extends NSViewController {

glview.wantsLayer = true;

console.log('viewDidLoad');
doTheThing();
}
}

const glview = CanvasGLView.alloc().initWithFrame({ x: 0, y: 0, width: 0, height: 0 });

let isDoingOrDone = false;

async function doTheThing() {
function mdnShadowColor(ctx) {
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowColor

ctx.fillStyle = 'black';

// Shadow
ctx.shadowColor = 'red';
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;

// Filled rectangle
ctx.fillRect(20, 20, 100, 100);

// Stroked rectangle
ctx.lineWidth = 6;

ctx.strokeRect(170, 20, 100, 100);
}

function mdnStrokeText(ctx) {
ctx.font = '50px serif';
ctx.fillText('Hello world', 50, 90);
}

function mdnRoundRect(ctx) {
// Rounded rectangle with zero radius (specified as a number)
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.roundRect(10, 20, 150, 100, 0);
ctx.stroke();

// Rounded rectangle with 40px radius (single element list)
ctx.strokeStyle = 'blue';
ctx.beginPath();
ctx.roundRect(10, 20, 150, 100, [40]);
ctx.stroke();

// Rounded rectangle with 2 different radii
ctx.strokeStyle = 'orange';
ctx.beginPath();
ctx.roundRect(10, 150, 150, 100, [10, 40]);
ctx.stroke();

// Rounded rectangle with four different radii
ctx.strokeStyle = 'green';
ctx.beginPath();
ctx.roundRect(400, 20, 200, 100, [0, 30, 50, 60]);
ctx.stroke();

// Same rectangle drawn backwards
ctx.strokeStyle = 'magenta';
ctx.beginPath();
ctx.roundRect(400, 150, -200, 100, [0, 30, 50, 60]);
ctx.stroke();
}

function doTheThing() {
if (isDoingOrDone) {
return;
}
Expand All @@ -136,36 +190,9 @@ async function doTheThing() {
// console.time('load1');
// loaded = asset.fromUrlSync('https://www.superherotoystore.com/cdn/shop/articles/Website_Blog_creatives_29_1600x.jpg?v=1713945144');
// console.timeEnd('load1');
console.log('asset: loaded', loaded, asset.width, asset.height);

const scale = NSScreen.mainScreen.backingScaleFactor;

// glview.prepareOpenGL();

console.log(scale);

const path = new Path2D();
path.roundRect(10, 10, 100, 100, [10, 10, 10, 10]);

let ctx = CanvasRenderingContext2D.withCpu(300, 150, 1, true, 0, 90, 1);
ctx.fillRect(0, 0, 300, 150);
console.log('ctx', ctx.toDataURL('image/png'));
console.log(ctx.font);
ctx.font = '100px serif';
console.log(ctx.font);

ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 150);
ctx.fillStyle = 'blue';
ctx.fillRect(100, 0, 100, 150);
ctx.fillStyle = 'green';
ctx.fillRect(200, 0, 100, 150);

ctx.fillStyle = 'purple';
ctx.fill(path);

console.log('ctx', ctx.toDataURL('image/png'));

//const gl = WebGLRenderingContext.offscreen(600, 300, 1, true, false, false, false, 1, true, false, false, false, false, false);

// gl.clearColor(0, 0, 1, 1);
Expand All @@ -182,61 +209,17 @@ async function doTheThing() {
// const glContext = WebGLRenderingContext.withView(handle.toNumber(), 1, true, false, false, false, 1, true, false, false, false, false, false);
// console.log(glContext, 'drawingBufferWidth', glContext.drawingBufferWidth, 'drawingBufferHeight', glContext.drawingBufferHeight);

ctx = CanvasRenderingContext2D.withView(handle.toNumber(), glview.frame.size.width * scale, glview.frame.size.height * scale, 1, true, 0, 90, 1);

ctx.fillRect(0, 0, 300, 150);
console.log('ctx', ctx.toDataURL('image/png'));
console.log(ctx.font);
ctx.font = '100px serif';
console.log(ctx.font);

ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 150);
ctx.fillStyle = 'blue';
ctx.fillRect(100, 0, 100, 150);
ctx.fillStyle = 'green';
ctx.fillRect(200, 0, 100, 150);

ctx.fillStyle = 'purple';
// ctx.fill(path);
console.log('osei');

// asset.loadUrlCallback('https://picsum.photos/id/1/200/300', (done) => {
// console.log('loadUrlCallback', done);
// });

// console.log(asset.width, asset.height);

try {
loaded = asset.fromUrlSync('https://www.superherotoystore.com/cdn/shop/articles/Website_Blog_creatives_29_1600x.jpg?v=1713945144');
console.log('picsum');
} catch (e) {
console.log('picsum: e', e);
}

// ctx.render();

//ctx.drawImage(asset, 0, 0, glview.frame.size.width * scale, glview.frame.size.height * scale);

const ctx = CanvasRenderingContext2D.withView(handle.toNumber(), glview.frame.size.width * scale, glview.frame.size.height * scale, 1, true, 0, 90, 1);
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, 1000, 1000);

ctx.fillStyle = 'black';

console.log('shadow');

// Shadow
ctx.shadowColor = 'red';
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
// ctx.fillRect(0, 0, 1000, 1000);

// Filled rectangle
ctx.fillRect(20, 20, 100, 100);
ctx.fillStyle = 'black';

// Stroked rectangle
ctx.lineWidth = 6;
ctx.translate(0, 100);

ctx.strokeRect(170, 20, 100, 100);
//mdnShadowColor(ctx);
mdnRoundRect(ctx);

ctx.render();

Expand Down
20 changes: 18 additions & 2 deletions napi/canvas-napi/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,11 @@ export type JSCanvasRenderingContext2D = CanvasRenderingContext2D;
export declare class CanvasRenderingContext2D {
static withView(view: number, width: number, height: number, density: number, alpha: boolean, fontColor: number, ppi: number, direction: number): JsCanvasRenderingContext2D;
static withCpu(width: number, height: number, density: number, alpha: boolean, fontColor: number, ppi: number, direction: number): JsCanvasRenderingContext2D;
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean | undefined | null): void;
beginPath(): void;
render(): void;
fill(path?: Path2D | undefined | null, rule?: string | undefined | null): void;
stroke(path?: Path2D | undefined | null): void;
fillText(text: string, x: number, y: number, maxWidth?: number | undefined | null): void;
get shadowColor(): string;
set shadowColor(color: string);
get shadowOffsetX(): number;
Expand All @@ -60,9 +62,19 @@ export declare class CanvasRenderingContext2D {
get font(): string;
set font(value: string);
fillRect(x: number, y: number, width: number, height: number): void;
strokeRect(x: number, y: number, width: number, height: number): void;
toDataURL(format: string, encoderOptions?: number | undefined | null): string;
drawImage(image: JSImageAsset, sx?: number | undefined | null, sy?: number | undefined | null, sWidth?: number | undefined | null, sHeight?: number | undefined | null, dx?: number | undefined | null, dy?: number | undefined | null, dWidth?: number | undefined | null, dHeight?: number | undefined | null): void;
rect(x: number, y: number, width: number, height: number): void;
rotate(angle: number): void;
roundRect(x: number, y: number, width: number, height: number, radii: number | Array<number>): void;
setLineDash(segments: Array<number>): void;
stroke(path?: Path2D | undefined | null): void;
strokeRect(x: number, y: number, width: number, height: number): void;
strokeText(text: string, x: number, y: number, maxWidth?: number | undefined | null): void;
strokeOval(x: number, y: number, width: number, height: number): void;
setTransform(a: number | JSDOMMatrix, b?: number | undefined | null, c?: number | undefined | null, d?: number | undefined | null, e?: number | undefined | null, f?: number | undefined | null): void;
transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
translate(x: number, y: number): void;
}
export type JSCanvasPattern = CanvasPattern;
export declare class CanvasPattern {}
Expand All @@ -78,3 +90,7 @@ export declare class ImageAsset {
fromUrl(url: string): Promise<boolean>;
loadUrlCallback(url: string, callback: (...args: any[]) => any): void;
}
export type JSDOMMatrix = DOMMatrix;
export declare class DOMMatrix {
constructor(data?: Array<number> | undefined | null);
}
3 changes: 2 additions & 1 deletion napi/canvas-napi/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,11 +284,12 @@ if (!nativeBinding) {
throw new Error(`Failed to load native binding`);
}

const { WebGLRenderingContext, Path2D, CanvasRenderingContext2D, CanvasPattern, CanvasGradient, ImageAsset } = nativeBinding;
const { WebGLRenderingContext, Path2D, CanvasRenderingContext2D, CanvasPattern, CanvasGradient, ImageAsset, DOMMatrix } = nativeBinding;

module.exports.WebGLRenderingContext = WebGLRenderingContext;
module.exports.Path2D = Path2D;
module.exports.CanvasRenderingContext2D = CanvasRenderingContext2D;
module.exports.CanvasPattern = CanvasPattern;
module.exports.CanvasGradient = CanvasGradient;
module.exports.ImageAsset = ImageAsset;
module.exports.DOMMatrix = DOMMatrix;
Loading

0 comments on commit 24162b6

Please sign in to comment.