Skip to content

Instantly share code, notes, and snippets.

@andybak

andybak/a-rectangle-by-google

Forked from ColemanGariety/a-rectangle-by-google
Last active December 24, 2015 07:59
Show Gist options
  • Save andybak/6767384 to your computer and use it in GitHub Desktop.
Save andybak/6767384 to your computer and use it in GitHub Desktop.
Download ZIP
reformat the javascript
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment