Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(2109)

Unified Diff: experimental/docs/canvasBackend.js

Issue 1342523002: json based animation toy (Closed) Base URL: https://skia.googlesource.com/skia.git@master
Patch Set: wip whats next? Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « experimental/docs/backend.js ('k') | experimental/docs/exampleSlides.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: experimental/docs/canvasBackend.js
diff --git a/experimental/docs/canvasBackend.js b/experimental/docs/canvasBackend.js
new file mode 100644
index 0000000000000000000000000000000000000000..0574813f2224b952fb9903bfdbed6aedf6785ede
--- /dev/null
+++ b/experimental/docs/canvasBackend.js
@@ -0,0 +1,167 @@
+var canvas;
+var ctx;
+var canvasGradients = {};
+
+function canvas_rbga(color) {
+ var a = canvas_opacity(color);
+ var r = (color >> 16) & 0xFF;
+ var g = (color >> 8) & 0xFF;
+ var b = (color >> 0) & 0xFF;
+ return "rgba(" + r + "," + g + "," + b + "," + a + ")";
+}
+
+function canvas_opacity(color) {
+ var a = (color >> 24) & 0xFF;
+ return a / 255.;
+}
+
+function displayCanvas(displayList) {
+ if (displayList.clear) {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ }
+ for (var index = 0; index < displayList.length; ++index) {
+ drawToCanvas(displayList[index]);
+ }
+}
+
+function drawToCanvas(action) {
+ ctx.save();
+ var paint = paintToCanvas(action.paint);
+ var draw = action.draw;
+ if ('string' == typeof(draw)) {
+ draw = (new Function("return " + draw))();
+ }
+ if (isArray(draw)) {
+ assert(draw.length > 0);
+ var picture = 'draw' in draw[0];
+ if (picture) {
+ for (var index = 0; index < draw.length; ++index) {
+ drawToCanvas(draw[index]);
+ }
+ return;
+ }
+ ctx.beginPath();
+ for (var index = 0; index < draw.length; ++index) {
+ for (var prop in draw[index]) {
+ var v = draw[index][prop];
+ switch (prop) {
+ case 'arcTo':
+ ctx.arcTo(v[0], v[1], v[2], v[3], v[4]);
+ break;
+ case 'close':
+ ctx.closePath();
+ break;
+ case 'cubic':
+ ctx.moveTo(v[0], v[1]);
+ ctx.bezierCurveTo(v[2], v[3], v[4], v[5], v[6], v[7]);
+ break;
+ case 'line':
+ ctx.moveTo(v[0], v[1]);
+ ctx.lineTo(v[2], v[3]);
+ break;
+ case 'quad':
+ ctx.moveTo(v[0], v[1]);
+ ctx.quadraticCurveTo(v[2], v[3], v[4], v[5]);
+ break;
+ default:
+ assert(0);
+ }
+ }
+ }
+ if ('fill' == paint.style) {
+ ctx.fill();
+ } else {
+ assert('stroke' == paint.style);
+ ctx.stroke();
+ }
+ } else {
+ assert('string' in draw);
+ if ('fill' == paint.style) {
+ ctx.fillText(draw.string, draw.x, draw.y);
+ } else {
+ assert('stroke' == paint.style);
+ ctx.strokeText(draw.string, draw.x, draw.y);
+ }
+ }
+ ctx.restore();
+}
+
+function keyframeCanvasInit(displayList, first) {
+ if ('canvas' in first && 'clear' == first.canvas) {
+ displayList.clear = true;
+ }
+}
+
+function paintToCanvas(paint) {
+ var color;
+ var inPicture = 'string' == typeof(paint);
+ if (inPicture) {
+ paint = (new Function("return " + paint))();
+ assert('object' == typeof(paint) && !isArray(paint));
+ }
+ if ('gradient' in paint) {
+ var gradient = paint.gradient.split('.');
+ var gradName = gradient[1];
+ if (!canvasGradients[gradName]) {
+ var g = window[gradient[0]][gradient[1]];
+ var grad = ctx.createRadialGradient(g.cx, g.cy, 0, g.cx, g.cy, g.r);
+ var stopLen = g.stops.length;
+ for (var index = 0; index < stopLen; ++index) {
+ var stop = g.stops[index];
+ var color = canvas_rbga(stop.color);
+ grad.addColorStop(index, color);
+ }
+ canvasGradients[gradName] = grad;
+ }
+ color = canvasGradients[gradName];
+ if (!inPicture) {
+ ctx.globalAlpha = canvas_opacity(paint.color);
+ }
+ } else {
+ color = canvas_rbga(paint.color);
+ }
+ if ('fill' == paint.style) {
+ ctx.fillStyle = color;
+ } else if ('stroke' == paint.style) {
+ ctx.strokeStyle = color;
+ } else {
+ ctx.globalAlpha = canvas_opacity(paint.color);
+ }
+ if ('strokeWidth' in paint) {
+ ctx.lineWidth = paint.strokeWidth;
+ }
+ if ('typeface' in paint) {
+ var typeface = typefaces[paint.typeface];
+ var font = typeface.style;
+ if ('textSize' in paint) {
+ font += " " + paint.textSize;
+ }
+ if ('family' in typeface) {
+ font += " " + typeface.family;
+ }
+ ctx.font = font;
+ if ('textAlign' in paint) {
+ ctx.textAlign = paint.textAlign;
+ }
+ if ('textBaseline' in paint) {
+ ctx.textBaseline = paint.textBaseline;
+ }
+ }
+ return paint;
+}
+
+function setupCanvas() {
+ canvas = document.getElementById("canvas");
+ ctx = canvas ? canvas.getContext("2d") : null;
+ assert(ctx);
+ var resScale = window.devicePixelRatio ? window.devicePixelRatio : 1;
+ var unscaledWidth = canvas.width;
+ var unscaledHeight = canvas.height;
+ canvas.width = unscaledWidth * resScale;
+ canvas.height = unscaledHeight * resScale;
+ canvas.style.width = unscaledWidth + 'px';
+ canvas.style.height = unscaledHeight + 'px';
+ if (resScale != 1) {
+ ctx.scale(resScale, resScale);
+ }
+}
« no previous file with comments | « experimental/docs/backend.js ('k') | experimental/docs/exampleSlides.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698