Skip to content

Commit

Permalink
add more binding funcs for wasm
Browse files Browse the repository at this point in the history
  • Loading branch information
zhangjipeng committed Nov 2, 2023
1 parent 23e121e commit 8c5ff32
Show file tree
Hide file tree
Showing 2 changed files with 214 additions and 23 deletions.
185 changes: 165 additions & 20 deletions wasm/lib.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,26 @@ function _createDataBuffer(vm, bytes) {
return vm._malloc(bytes);
}

function _createPointBuffer(vm, pt, y) {
let cv = _createDataBuffer(vm, 8);
let buffer = vm._HEAPF32.subarray((cv>>2), (cv>>2) + 2);

if (y !== undefined) {
buffer[0] = pt;
buffer[1] = y;
} else if (typeof pt === "object") {
if (typeof pt.x !== "number" ||
typeof pt.y !== "number") {
throw TypeError("Rect value object must be {x:<number>, y:<number>}");
}
buffer[0] = typeof pt.x === "number" ? pt.x : 0.0;
buffer[1] = typeof pt.y === "number" ? pt.y : 0.0;
} else {
throw TypeError("Point values is not numbers or object!");
}
return cv;
}

function _createRectBuffer(vm, rc, y, w, h) {
let cv = _createDataBuffer(vm, 16);
let buffer = vm._HEAPF32.subarray((cv>>2), (cv>>2) + 4);
Expand Down Expand Up @@ -155,40 +175,40 @@ class Context {
this._ps_fill = _getExportWrapper(instance, 'ps_fill'); // RED
this._ps_paint = _getExportWrapper(instance, 'ps_paint'); // RED
this._ps_clear = _getExportWrapper(instance, 'ps_clear'); // RED
this._ps_set_alpha = _getExportWrapper(instance, 'ps_set_alpha');
this._ps_set_blur = _getExportWrapper(instance, 'ps_set_blur');
this._ps_set_gamma = _getExportWrapper(instance, 'ps_set_gamma');
this._ps_set_antialias = _getExportWrapper(instance, 'ps_set_antialias');
this._ps_set_shadow = _getExportWrapper(instance, 'ps_set_shadow');
this._ps_set_shadow_color = _getExportWrapper(instance, 'ps_set_shadow_color');
this._ps_set_alpha = _getExportWrapper(instance, 'ps_set_alpha'); // RED
this._ps_set_blur = _getExportWrapper(instance, 'ps_set_blur'); // RED
this._ps_set_gamma = _getExportWrapper(instance, 'ps_set_gamma'); // RED
this._ps_set_antialias = _getExportWrapper(instance, 'ps_set_antialias'); // RED
this._ps_set_shadow = _getExportWrapper(instance, 'ps_set_shadow'); // RED
this._ps_set_shadow_color = _getExportWrapper(instance, 'ps_set_shadow_color'); // RED
this._ps_reset_shadow = _getExportWrapper(instance, 'ps_reset_shadow'); // RED
this._ps_set_fill_rule = _getExportWrapper(instance, 'ps_set_fill_rule');
this._ps_set_line_cap = _getExportWrapper(instance, 'ps_set_line_cap');
this._ps_set_line_inner_join = _getExportWrapper(instance, 'ps_set_line_inner_join');
this._ps_set_line_join = _getExportWrapper(instance, 'ps_set_line_join');
this._ps_set_line_width = _getExportWrapper(instance, 'ps_set_line_width');
this._ps_set_miter_limit = _getExportWrapper(instance, 'ps_set_miter_limit');
this._ps_set_line_dash = _getExportWrapper(instance, 'ps_set_line_dash'); // RED
this._ps_set_line_width = _getExportWrapper(instance, 'ps_set_line_width'); // RED
this._ps_set_miter_limit = _getExportWrapper(instance, 'ps_set_miter_limit'); // RED
this._ps_set_line_dash = _getExportWrapper(instance, 'ps_set_line_dash');
this._ps_reset_line_dash = _getExportWrapper(instance, 'ps_reset_line_dash'); // RED
this._ps_new_path = _getExportWrapper(instance, 'ps_new_path'); // RED
this._ps_add_sub_path = _getExportWrapper(instance, 'ps_add_sub_path');
this._ps_new_sub_path = _getExportWrapper(instance, 'ps_new_sub_path');
this._ps_rectangle = _getExportWrapper(instance, 'ps_rectangle'); // RED
this._ps_rounded_rect = _getExportWrapper(instance, 'ps_rounded_rect'); // RED
this._ps_ellipse = _getExportWrapper(instance, 'ps_ellipse');
this._ps_ellipse = _getExportWrapper(instance, 'ps_ellipse'); // RED
this._ps_close_path = _getExportWrapper(instance, 'ps_close_path'); // RED
this._ps_move_to = _getExportWrapper(instance, 'ps_move_to');
this._ps_line_to = _getExportWrapper(instance, 'ps_line_to');
this._ps_bezier_curve_to = _getExportWrapper(instance, 'ps_bezier_curve_to');
this._ps_quad_curve_to = _getExportWrapper(instance, 'ps_quad_curve_to');
this._ps_arc = _getExportWrapper(instance, 'ps_arc');
this._ps_tangent_arc = _getExportWrapper(instance, 'ps_tangent_arc');
this._ps_move_to = _getExportWrapper(instance, 'ps_move_to'); // RED
this._ps_line_to = _getExportWrapper(instance, 'ps_line_to'); // RED
this._ps_bezier_curve_to = _getExportWrapper(instance, 'ps_bezier_curve_to'); // RED
this._ps_quad_curve_to = _getExportWrapper(instance, 'ps_quad_curve_to'); // RED
this._ps_arc = _getExportWrapper(instance, 'ps_arc'); // RED
this._ps_tangent_arc = _getExportWrapper(instance, 'ps_tangent_arc'); // RED
this._ps_set_path = _getExportWrapper(instance, 'ps_set_path');
this._ps_get_path = _getExportWrapper(instance, 'ps_get_path'); // DEL
this._ps_translate = _getExportWrapper(instance, 'ps_translate');
this._ps_scale = _getExportWrapper(instance, 'ps_scale');
this._ps_shear = _getExportWrapper(instance, 'ps_shear');
this._ps_rotate = _getExportWrapper(instance, 'ps_rotate');
this._ps_translate = _getExportWrapper(instance, 'ps_translate'); // RED
this._ps_scale = _getExportWrapper(instance, 'ps_scale'); // RED
this._ps_shear = _getExportWrapper(instance, 'ps_shear'); // RED
this._ps_rotate = _getExportWrapper(instance, 'ps_rotate'); // RED
this._ps_identity = _getExportWrapper(instance, 'ps_identity'); // RED
this._ps_transform = _getExportWrapper(instance, 'ps_transform');
this._ps_set_matrix = _getExportWrapper(instance, 'ps_set_matrix');
Expand Down Expand Up @@ -254,6 +274,70 @@ class Context {
this._ps_identity(this._ctx);
}

translate(x, y) {
this._ps_translate(this._ctx, x, y);
}

scale(sx, sy) {
this._ps_scale(this._ctx, sx, sy);
}

shear(shx, shy) {
this._ps_shear(this._ctx, shx, shy);
}

rotate(a) {
this._ps_rotate(this._ctx, a);
}

moveTo(pt/*x*/, y) {
let cv = _createPointBuffer(this._ps, pt, y);
this._ps_move_to(this._ctx, cv);
_destoryBuffer(this._ps, cv);
}

lineTo(pt/*x*/, y) {
let cv = _createPointBuffer(this._ps, pt, y);
this._ps_line_to(this._ctx, cv);
_destoryBuffer(this._ps, cv);
}

quadCurveTo(cp, ep) {
let cv1 = _createPointBuffer(this._ps, cp);
let cv2 = _createPointBuffer(this._ps, ep);
this._ps_quad_curve_to(this._ctx, cv1, cv2);
_destoryBuffer(this._ps, cv2);
_destoryBuffer(this._ps, cv1);
}

bezierCurveTo(cp1, cp2, ep) {
let cv1 = _createPointBuffer(this._ps, cp1);
let cv2 = _createPointBuffer(this._ps, cp2);
let cv3 = _createPointBuffer(this._ps, ep);
this._ps_bezier_curve_to(this._ctx, cv1, cv2, cv3);
_destoryBuffer(this._ps, cv3);
_destoryBuffer(this._ps, cv2);
_destoryBuffer(this._ps, cv1);
}

arc(cp, r, sa, ea, c) {
if (typeof r !== "number" || typeof sa !== "number" || typeof ea !== "number" || typeof c !== "boolean") {
throw TypeError("Parameters must be radius:<number>, sangle:<number>, eangle:<number>, colckwise:<boolean>");
}
let cv = _createPointBuffer(this._ps, cp);
this._ps_arc(this._ctx, cv, r, sa, ea, c);
_destoryBuffer(this._ps, cv);
}

tangentArc(rc, sa, sw) {
if (typeof sa !== "number" || typeof sw !== "number") {
throw TypeError("Parameters must be sangle:<number>, sweep:<number>");
}
let cv = _createRectBuffer(this._ps, rc);
this._ps_tangent_arc(this._ctx, cv, sa, sw);
_destoryBuffer(this._ps, cv);
}

closePath() {
this._ps_close_path(this._ctx);
}
Expand Down Expand Up @@ -297,6 +381,12 @@ class Context {
_destoryBuffer(this._ps, cv);
}

ellipse(rc/* x */, y, w, h) {
let cv = _createRectBuffer(this._ps, rc, y, w, h);
this._ps_ellipse(this._ctx, cv);
_destoryBuffer(this._ps, cv);
}

newPath() {
this._ps_new_path(this._ctx);
}
Expand All @@ -313,6 +403,61 @@ class Context {
_destoryBuffer(this._ps, cv);
}

setShadowColor(color/* r */, g, b, a) {
let cv = _createColorBuffer(this._ps, color, g, b, a);
this._ps_set_shadow_color(this._ctx, cv);
_destoryBuffer(this._ps, cv);
}

setShadow(x, y, b) {
if (typeof x !== "number" || typeof y !== "number" || typeof b !== "number") {
throw TypeError("Parameters must be <number>");
}
this._ps_set_shadow(this._ctx, x, y, b);
}

setAlpha(a) {
if (typeof a !== "number" || a < 0.0 || a > 1.0) {
throw TypeError("Parameter must be <number> [0 ~ 1] default 1.0");
}
this._ps_set_alpha(this._ctx, a);
}

setLineWidth(w) {
if (typeof w !== "number") {
throw TypeError("Parameter must be <number> [greater than 0] default 1");
}
this._ps_set_line_width(this._ctx, w);
}

setGamma(g) {
if (typeof g !== "number" || g < 0.0 || g > 3.0) {
throw TypeError("Parameter must be <number> [0 ~ 3] default 1.0");
}
this._ps_set_gamma(this._ctx, g);
}

setBlur(b) {
if (typeof b !== "number" || b < 0.0 || b > 1.0) {
throw TypeError("Parameter must be <number> [0 ~ 1] default 0.0");
}
this._ps_set_blur(this._ctx, b);
}

setMiterLimit(l) {
if (typeof l !== "number") {
throw TypeError("Parameter must be <number> [greater than 0] default 4.0");
}
this._ps_set_miter_limit(this._ctx, l);
}

setAntialias(a) {
if (typeof a !== "boolean") {
throw TypeError("Parameter must be <boolean> default true");
}
this._ps_set_antialias(this._ctx, a);
}

destroy() {
if (this._ctx != undefined) {
this._ps_context_unref(this._ctx);
Expand Down
52 changes: 49 additions & 3 deletions wasm/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<script src="./lib.js" type="module"></script>
</head>
<body>
<canvas id="canvas" width="640" height="480"/>
<canvas id="canvas" width="800" height="600"/>
<script type="module">
import Picasso from './lib.js';

Expand All @@ -19,10 +19,12 @@


function draw(time) {
ctx.setSourceColor(0xFFFFFFFF);
ctx.clear();
ctx.identity();

//let c = 0xFF0000FF;
ctx.setSourceColor(255, 0, 0, 1.0);
// ctx.rectangle(100, 100, 200, 300);
let rc = {x:50, y:50, w:100, h:100};
ctx.rectangle(rc);
ctx.fill();
Expand All @@ -33,8 +35,52 @@
ctx.roundedRect(rrc);
ctx.fill();

ctx.ellipse(350, 50, 150, 100);
ctx.setSourceColor("#0000FF80");
ctx.fill();

ctx.save();
ctx.rectangle(550, 50, 100, 100);
ctx.setStrokeColor("#0080FF");
ctx.setLineWidth(10);
ctx.translate(-600, -100);
ctx.rotate(1.84);
ctx.scale(0.5, 0.5);
ctx.translate(600, 100);
ctx.stroke();
ctx.restore();

ctx.save();
ctx.setStrokeColor("#000000");
ctx.setLineWidth(5);
ctx.moveTo(50, 200);
let p = {x: 200, y: 200};
ctx.lineTo(p);
//ctx.lineTo(50, 200);
//ctx.setAntialias(false);
ctx.setShadow(10, 10, 0.1);
ctx.stroke();
ctx.restore();

ctx.moveTo(50, 250);
let cp = {x:100, y:200};
let ep1 = {x:200, y:250};
ctx.quadCurveTo(cp, ep1);

ctx.moveTo(50, 300);
let cp1 = {x:100, y:250};
let cp2 = {x:150, y:200};
let ep2 = {x:200, y:300};
ctx.bezierCurveTo(cp1, cp2, ep2);
ctx.stroke();

let ce = {x:300, y:250};
ctx.arc(ce, 50, 0.2, 1.1, false);
ctx.stroke();

//ctx.stroke();
let crc = {x:400, y:200, w:100, h:80};
ctx.tangentArc(crc, 0.2, 2.8);
ctx.stroke();
//ctx.paint();
canvas.flush();
window.requestAnimationFrame(draw);
Expand Down

0 comments on commit 8c5ff32

Please sign in to comment.