Skip to content

Instantly share code, notes, and snippets.

@ColemanGariety

ColemanGariety/a-rectangle-by-google

Last active December 24, 2015 07:49
Show Gist options
  • Save ColemanGariety/6766626 to your computer and use it in GitHub Desktop.
Save ColemanGariety/6766626 to your computer and use it in GitHub Desktop.
Download ZIP
A rectangle made by Google Web Designer
Raw
a-rectangle-by-google
<!DOCTYPE html>
<html>
<head data-gwd-animation-mode="quickMode">
<title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="Google Web Designer 1.0.0.924">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
body {
background-color: transparent;
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
}
.gwd-canvas-en54 {
position: absolute;
width: 201px;
height: 104px;
left: 298px;
top: 226px;
-webkit-transform-style: preserve-3d;
}
</style>
<script type="text/x-serialization" data-gwd-canvas="serialization">
{"useCanvas":1,"useWebGl":0,"data":["{\"version\":0.1,\"id\":\"sp22shh7\",\"fov\":45,\"zNear\":0.1,\"zFar\":100,\"viewDist\":5,\"webGL\":false,\"lightAmount\":0.3,\"children\":[{\"type\":1,\"xoff\":0,\"yoff\":-1.4210854715202004e-14,\"strokeWidth\":1,\"strokeColor\":[0,0,0,1],\"fillColor\":[1,0,0,1],\"tlRadius\":0,\"trRadius\":0,\"blRadius\":0,\"brRadius\":0,\"width\":201,\"height\":104.00000000000003,\"strokeStyle\":\"Solid\",\"strokeMat\":null,\"fillMat\":null}]}"]}
</script>
<script data-gwd-canvas="runtime" type="text/javascript">
// Copyright 2013 Google Inc. All Rights Reserved.
// Copyright 2013 Google Inc. All Rights Reserved.
(function () {
var t = function (c, a) {
this.c = void 0 !== c ? c : 0;
this.d = void 0 !== a ? a : 0
};
t.prototype.ceil = function () {
this.c = Math.ceil(this.c);
this.d = Math.ceil(this.d);
return this
};
t.prototype.floor = function () {
this.c = Math.floor(this.c);
this.d = Math.floor(this.d);
return this
};
window.addEventListener("load", function () {
window.removeEventListener("load", x, !1);
x()
}, !1);
var x = function () {
for (var c, a, h = [], d = document.querySelectorAll('[type="text/x-serialization"][data-gwd-canvas="serialization"]'), m = d.length, g = 0; g < m; g++)h.push(JSON.parse(d[g].textContent));
d = h.length;
for (m = 0; m < d; m++)for (var g = h[m].data, n = document.body, f = g.length, r = 0; r < f; r++) {
var b = JSON.parse(g[r]);
if (b.children && 1 === b.children.length && (c = b.id) && (c = n.querySelector("canvas[data-RDGE-id='" + c + "']"))) {
a = c;
var e = b.children[0], b = a.getContext("2d");
c = a.width;
a = a.height;
switch (e.type) {
case 1:
var k = e.strokeWidth;
b.beginPath();
var p = Math.ceil(k) - 0.5;
e.fillColor && (b.fillStyle = y(b, e.fillColor, c, a, k, p), b.lineWidth = k, B(e, p, b, c, a), b.fill(), b.closePath());
b.beginPath();
p = Math.ceil(0.5 * k) - 0.5;
e.strokeColor && (b.strokeStyle = y(b, e.strokeColor, c, a, k, 0), b.lineWidth = k, B(e, p, b, c, a), b.stroke(), b.closePath());
break;
case 2:
var k = e.strokeWidth, p = e.innerRadius, s = e.strokeColor, e = e.fillColor, l = 0.5 * (c - k), q = 0.5 * (a - k), u = 0.5 * (p * c - k), D = 0.5 * (p * a - k), v = 0.5 * c, w = 0.5 * a, z = null != e, A = null != s && 0 < k;
z && (b.fillStyle = y(b, e, c, a, k, k));
A && (b.strokeStyle =
y(b, s, c, a, k, k), b.lineWidth = k);
0 === p ? (C(b, v, w, l, q, !0, !0), z && b.fill(), A && b.stroke()) : (z && (C(b, v, w, l, q, !0, !0), C(b, v, w, u, D, !1, !1), b.fill()), A && (C(b, v, w, l, q, !0, !0), b.stroke(), C(b, v, w, u, D, !1, !0), b.stroke()));
break;
case 3:
l = e.strokeColor;
k = e.slope;
p = e.xAdj;
s = e.yAdj;
b.beginPath();
b.lineWidth = e.strokeWidth;
if (l) {
b.strokeStyle = y(b, l, c, a, 0, 0);
l = [];
e = [];
switch (k) {
case "vertical":
l = [0.5 * c, 0];
e = [0.5 * c, a];
break;
case "horizontal":
l = [0, 0.5 * a];
e = [c, 0.5 * a];
break;
default:
0 < k ? (l = [p, s], e = [c - p, a - s]) : (l = [p, a - s], e = [c - p, s])
}
c =
new t(l[0], l[1]);
a = new t(e[0], e[1]);
b.moveTo(c.c, c.d);
b.lineTo(a.c, a.d);
b.stroke()
}
break;
case 5:
b.save();
k = null != e.fillColor;
p = null != e.strokeColor && 0 < e.strokeWidth;
b.lineCap = "round";
b.lineJoin = "round";
s = e.anchors.length;
q = l = null;
if (1 < s) {
b.beginPath();
l = e.anchors[0];
b.moveTo(l[1][0], l[1][1]);
for (u = 1; u < s; u++)q = e.anchors[u], b.bezierCurveTo(l[2][0], l[2][1], q[0][0], q[0][1], q[1][0], q[1][1]), l = q;
e.isClosed && (q = e.anchors[0], b.bezierCurveTo(l[2][0], l[2][1], q[0][0], q[0][1], q[1][0], q[1][1]));
k && (b.fillStyle =
y(b, e.fillColor, c, a, e.strokeWidth, 0), b.fill());
p && (b.lineWidth = e.strokeWidth, b.strokeStyle = y(b, e.strokeColor, c, a, e.strokeWidth, 0), b.stroke())
}
b.restore()
}
}
}
}, y = function (c, a, h, d, m, g) {
if (a.gradientMode) {
var n = 0.5 * h, f = 0.5 * d;
c = "radial" == a.gradientMode ? c.createRadialGradient(n, f, 0, n, f, Math.max(h - 2 * m, d - 2 * m) / 2) : c.createLinearGradient(g, f, h - g, f);
a = a.color;
h = a.length;
for (d = 0; d < h; d++)m = a[d].value, c.addColorStop(a[d].position / 100, "rgba(" + m.r + "," + m.g + "," + m.b + "," + m.a + ")");
return c
}
return"rgba(" + Math.floor(255 *
a[0]) + "," + Math.floor(255 * a[1]) + "," + Math.floor(255 * a[2]) + "," + a[3] + ")"
}, B = function (c, a, h, d, m) {
var g = 0.5 * d, n = 0.5 * m, f = [a, a], r = c.tlRadius, b = c.trRadius, e = c.blRadius;
c = c.brRadius;
g = g < n ? g : n;
r > g && (r = g);
e > g && (e = g);
c > g && (c = g);
b > g && (b = g);
g = d - a;
n = m - a;
0 >= r && 0 >= e && 0 >= c && 0 >= b ? h.rect(f[0], f[1], d - 2 * a, m - 2 * a) : (d = r - a, 0 > d && (d = 0), f[1] += d, 0.001 > Math.abs(d) && (f[1] = a), h.moveTo(f[0], f[1]), f = [a, n], d = e - a, 0 > d && (d = 0), f[1] -= d, h.lineTo(f[0], f[1]), 0.001 < d && h.arcTo(a, n, a + d, n, e - a), f = [g, n], d = c - a, 0 > d && (d = 0), f[0] -= d, h.lineTo(f[0], f[1]),
0.001 < d && h.arcTo(g, n, g, n - d, c - a), f = [g, a], d = b - a, 0 > d && (d = 0), f[1] += d, h.lineTo(f[0], f[1]), 0.001 < d && h.arcTo(g, a, g - d, a, b - a), f = [a, a], d = r - a, 0 > d && (d = 0), f[0] += d, h.lineTo(f[0], f[1]), 0.001 < d ? h.arcTo(a, a, a, a + d, r - a) : h.lineTo(a, 2 * a))
}, C = function (c, a, h, d, m, g, n) {
c.save();
n && c.beginPath();
c.translate(a, h);
c.scale(d, m);
c.arc(0, 0, 1, 0, 2 * Math.PI, g);
c.restore()
};
})();
</script>
</head>
<body>
<canvas data-rdge-id="sp22shh7" width="201" height="104" class="gwd-canvas-en54"></canvas>
</body>
</html>
@ericguzman
Copy link

In Web Designer, when using the shape tools (rect and oval) and pen tool, you'll create canvas elements which require JavaScript to render. Here's a gist using a div for a rectangle: https://gist.github.com/ericguzman/6768395, which requires no javascript.

It's also worth it to note that the large script block is our canvas runtime, which is a hit of fixed size for creating canvas content. Any subsequently added canvas elements will re-use the same runtime.

Hope that helps,
Eric - GWD team member

@tilsammans
Copy link

WAT

@blhack
Copy link

blhack commented Sep 30, 2013

Did you actually read through any of that code at the top, or are you just assuming it's useless?

It looks like pretty boilerplate stuff that is probably included in /every/ page that this tool generates.

@cliffordoravec
Copy link

Good to see FrontPage alive and well!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment