78e17130f3
git-svn-id: http://skia.googlecode.com/svn/trunk@3702 2bbb7eff-a529-9590-31e7-b0007b416f81
513 lines
13 KiB
HTML
513 lines
13 KiB
HTML
<html>
|
|
<head>
|
|
<div style="height:0">
|
|
<div id="test_1div">
|
|
path.moveTo(213.673737, 413.292938);
|
|
path.lineTo(225.200134, 343.616821);
|
|
path.lineTo(236.726532, 273.940704);
|
|
path.lineTo(219.386414, 231.373322);
|
|
path.lineTo(213.673737, 413.292938);
|
|
path.close();
|
|
path.moveTo(43.485352, 308.984497);
|
|
path.lineTo(122.610657, 305.950134);
|
|
path.lineTo(201.735962, 302.915802);
|
|
path.lineTo(280.861267, 299.881470);
|
|
path.lineTo(43.485352, 308.984497);
|
|
path.close();
|
|
</div>
|
|
<div id="test_2div">
|
|
path.moveTo(-177.878387, 265.368988);
|
|
path.lineTo(-254.415771, 303.709961);
|
|
path.lineTo(-317.465363, 271.325562);
|
|
path.lineTo(-374.520386, 207.507660);
|
|
path.lineTo(-177.878387, 265.368988);
|
|
path.close();
|
|
path.moveTo(-63.582489, -3.679123);
|
|
path.lineTo(-134.496841, 26.434566);
|
|
path.lineTo(-205.411209, 56.548256);
|
|
path.lineTo(-276.325562, 86.661942);
|
|
path.lineTo(-63.582489, -3.679123);
|
|
path.close();
|
|
path.moveTo(-57.078423, 162.633453);
|
|
path.lineTo(-95.963928, 106.261139);
|
|
path.lineTo(-134.849457, 49.888824);
|
|
path.lineTo(-173.734955, -6.483480);
|
|
path.lineTo(-57.078423, 162.633453);
|
|
path.close();
|
|
</div>
|
|
<div id="test_3div">
|
|
path.moveTo(98.666489, -94.295059);
|
|
path.lineTo(156.584320, -61.939133);
|
|
path.lineTo(174.672974, -12.343765);
|
|
path.lineTo(158.622345, 52.028267);
|
|
path.lineTo(98.666489, -94.295059);
|
|
path.close();
|
|
path.moveTo(-133.225616, -48.622055);
|
|
path.lineTo(-73.855499, -10.375397);
|
|
path.lineTo(-14.485367, 27.871277);
|
|
path.lineTo(44.884750, 66.117935);
|
|
path.lineTo(-133.225616, -48.622055);
|
|
path.close();
|
|
path.moveTo( 9.030045, -163.413132);
|
|
path.lineTo(-19.605331, -89.588760);
|
|
path.lineTo(-48.240707, -15.764404);
|
|
path.lineTo(-76.876053, 58.059944);
|
|
path.lineTo( 9.030045, -163.413132);
|
|
path.close();
|
|
</div>
|
|
<div id="test_4div">
|
|
path.moveTo(340.41568, -170.97171);
|
|
path.lineTo(418.846893, -142.428329);
|
|
path.lineTo(497.278107, -113.884933);
|
|
path.lineTo(449.18222, -45.6723022);
|
|
path.lineTo(340.41568, -170.97171);
|
|
path.close();
|
|
path.moveTo(326.610535, 34.0393639);
|
|
path.lineTo(371.334595, -14.9620667);
|
|
path.lineTo(416.058624, -63.9634857);
|
|
path.lineTo(460.782654, -112.96492);
|
|
path.lineTo(326.610535, 34.0393639);
|
|
path.close();
|
|
</div>
|
|
<div id="test_5div">
|
|
original:
|
|
path.moveTo(0, 0);
|
|
path.quadTo(20, 0, 20, 20);
|
|
path.lineTo(0, 0);
|
|
path.close();
|
|
path.moveTo(0, 20);
|
|
path.quadTo(0, 0, 20, 0);
|
|
path.lineTo(0, 20);
|
|
path.close();
|
|
simplified:
|
|
path.moveTo(0, 0);
|
|
path.lineTo(5, 5);
|
|
path.quadTo(0, 10, 0, 20);
|
|
path.lineTo(20, 20);
|
|
path.quadTo(20, 10, 15, 5);
|
|
path.lineTo(20, 0);
|
|
path.quadTo(14.1421356, 0, 10, 1.71572876);
|
|
path.quadTo(5.85786438, 0, 0, 0);
|
|
path.close();
|
|
</div>
|
|
<div id="test_6div">
|
|
original:
|
|
path.moveTo(0, 20);
|
|
path.quadTo(20, 0, 40, 20);
|
|
path.lineTo(0, 20);
|
|
path.close();
|
|
path.moveTo(40, 10);
|
|
path.quadTo(20, 30, 0, 10);
|
|
path.lineTo(40, 10);
|
|
path.close();
|
|
simplified:
|
|
path.moveTo(0, 10);
|
|
path.quadTo(2.92893219, 12.9289322, 5.85786438, 15);
|
|
path.quadTo(2.92893219, 17.0710678, 0, 20);
|
|
path.lineTo(40, 20);
|
|
path.quadTo(37.0710678, 17.0710678, 34.1421356, 15);
|
|
path.quadTo(37.0710678, 12.9289322, 40, 10);
|
|
path.lineTo(0, 10);
|
|
path.close();
|
|
</div>
|
|
<div id="test_7div">
|
|
path.moveTo(0, 0);
|
|
path.quadTo(0, 0, 0, 0);
|
|
path.lineTo(0, 0);
|
|
path.close();
|
|
path.moveTo(0, 0);
|
|
path.lineTo(0, 1);
|
|
path.quadTo(1, 1, 1, 2);
|
|
path.lineTo(0, 0);
|
|
path.close();
|
|
</div>
|
|
|
|
<div id="test_8div">
|
|
original:
|
|
path.moveTo(0, 0);
|
|
path.lineTo(3, 1);
|
|
path.lineTo(0, 0);
|
|
path.close();
|
|
path.moveTo(1, 0);
|
|
path.lineTo(0, 1);
|
|
path.quadTo(2, 1, 3, 3);
|
|
path.lineTo(1, 0);
|
|
path.close();
|
|
simplified:
|
|
path.moveTo(1, 0);
|
|
path.lineTo(0, 1);
|
|
path.quadTo(1.42857146, 1, 2.34693885, 2.02040815);
|
|
path.lineTo(1.28571427, 0.428571433);
|
|
path.lineTo(1, 0);
|
|
path.close();
|
|
path.moveTo(2.34693885, 2.02040815);
|
|
path.quadTo(2.71428561, 2.42857146, 3, 3);
|
|
path.lineTo(2.34693885, 2.02040815);
|
|
path.close();
|
|
</div>
|
|
|
|
<div id="test_9div">
|
|
path.moveTo(0, 0);
|
|
path.quadTo(0, 0, 0, 0);
|
|
path.lineTo(0, 2);
|
|
path.lineTo(0, 0);
|
|
path.close();
|
|
path.moveTo(0, 0);
|
|
path.lineTo(2, 1);
|
|
path.quadTo(2, 2, 3, 3);
|
|
path.lineTo(0, 0);
|
|
path.close();
|
|
</div>
|
|
|
|
<div id="test_10div">
|
|
original:
|
|
path.moveTo(0, 0);
|
|
path.lineTo(0, 2);
|
|
path.lineTo(0, 0);
|
|
path.close();
|
|
path.moveTo(3, 0);
|
|
path.quadTo(1, 1, 0, 2);
|
|
path.lineTo(3, 0);
|
|
path.close();
|
|
simplified:
|
|
path.moveTo(0, 0);
|
|
path.lineTo(0, 2);
|
|
path.quadTo(1, 1, 3, 0);
|
|
path.lineTo(0, 0);
|
|
path.close();
|
|
</div>
|
|
|
|
<div id="test_11div">
|
|
original:
|
|
path.moveTo(0, 0);
|
|
path.quadTo(0, 0, 1, 0);
|
|
path.lineTo(1, 1);
|
|
path.lineTo(0, 0);
|
|
path.close();
|
|
path.moveTo(0, 0);
|
|
path.quadTo(3, 0, 1, 1);
|
|
path.lineTo(0, 0);
|
|
path.close();
|
|
simplified:
|
|
path.moveTo(0, 0);
|
|
path.lineTo(1, 1);
|
|
path.lineTo(1, 0);
|
|
path.lineTo(0, 0);
|
|
</div>
|
|
|
|
<div id="test_12div">
|
|
path.moveTo(0, 0);
|
|
path.quadTo(0, 0, 0, 0);
|
|
path.lineTo(1, 1);
|
|
path.lineTo(0, 0);
|
|
path.close();
|
|
path.moveTo(0, 0);
|
|
path.lineTo(0, 0);
|
|
path.quadTo(0, 1, 2, 1);
|
|
path.lineTo(0, 0);
|
|
path.close();
|
|
</div>
|
|
|
|
<div id="test_13div">
|
|
original:
|
|
path.moveTo(0, 0);
|
|
path.quadTo(0, 0, 1, 3);
|
|
path.lineTo(3, 3);
|
|
path.lineTo(0, 0);
|
|
path.close();
|
|
path.moveTo(0, 1);
|
|
path.lineTo(1, 1);
|
|
path.quadTo(0, 3, 3, 3);
|
|
path.lineTo(0, 1);
|
|
path.close();
|
|
simplified:
|
|
path.moveTo(0, 0);
|
|
path.lineTo(0.333333343, 1);
|
|
path.lineTo(0, 1);
|
|
path.lineTo(0.428571433, 1.28571427);
|
|
path.lineTo(0.333333343, 1);
|
|
path.lineTo(1, 1);
|
|
path.lineTo(0, 0);
|
|
path.close();
|
|
path.moveTo(1, 1);
|
|
path.quadTo(0.857142866, 1.28571427, 0.795918345, 1.53061223);
|
|
path.lineTo(0.428571433, 1.28571427);
|
|
path.lineTo(1, 3);
|
|
path.lineTo(3, 3);
|
|
path.lineTo(0.795918345, 1.53061223);
|
|
path.quadTo(0.428571433, 3, 3, 3);
|
|
path.lineTo(1, 1);
|
|
path.close();
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var testDivs = [
|
|
test_13div,
|
|
test_12div,
|
|
test_11div,
|
|
test_10div,
|
|
test_9div,
|
|
test_8div,
|
|
test_7div,
|
|
test_6div,
|
|
test_5div,
|
|
test_4div,
|
|
test_3div,
|
|
test_2div,
|
|
test_1div,
|
|
];
|
|
|
|
var scale, columns, rows, xStart, yStart;
|
|
|
|
var ticks = 0.1;
|
|
var at_x = 13 + 0.5;
|
|
var at_y = 13 + 0.5;
|
|
|
|
var tests = [];
|
|
var testIndex = 0;
|
|
|
|
var ctx;
|
|
|
|
function parse(test) {
|
|
var contours = [];
|
|
var contourStrs = test.split("path.close();");
|
|
var pattern = /-?\d+\.*\d*/g;
|
|
for (var c in contourStrs) {
|
|
var contour = contourStrs[c];
|
|
var verbStrs = contour.split("path");
|
|
var verbs = [];
|
|
for (var v in verbStrs) {
|
|
var verbStr = verbStrs[v];
|
|
var points = verbStr.match(pattern);
|
|
var pts = [];
|
|
for (var wd in points) {
|
|
var num = parseFloat(points[wd]);
|
|
if (isNaN(num)) continue;
|
|
pts.push(num);
|
|
}
|
|
if (pts.length > 0)
|
|
verbs.push(pts);
|
|
}
|
|
if (verbs.length > 0)
|
|
contours.push(verbs);
|
|
}
|
|
if (contours.length > 0)
|
|
tests.push(contours);
|
|
}
|
|
|
|
function init(test) {
|
|
var canvas = document.getElementById('canvas');
|
|
if (!canvas.getContext) return;
|
|
ctx = canvas.getContext('2d');
|
|
var xmin = Infinity;
|
|
var xmax = -Infinity;
|
|
var ymin = Infinity;
|
|
var ymax = -Infinity;
|
|
for (var contours in test) {
|
|
var contour = test[contours];
|
|
for (var verbs in contour) {
|
|
var verb = contour[verbs];
|
|
var last = verb.length;
|
|
xmin = Math.min(xmin, verb[0]);
|
|
ymin = Math.min(ymin, verb[1]);
|
|
xmax = Math.max(xmax, verb[last - 2]);
|
|
ymax = Math.max(ymax, verb[last - 1]);
|
|
}
|
|
}
|
|
var subscale = 1;
|
|
while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) {
|
|
subscale *= 10;
|
|
}
|
|
columns = Math.ceil(xmax) - Math.floor(xmin) + 1;
|
|
rows = Math.ceil(ymax) - Math.floor(ymin) + 1;
|
|
xStart = Math.floor(xmin);
|
|
yStart = Math.floor(ymin);
|
|
var hscale = ctx.canvas.width / columns / ticks;
|
|
var vscale = ctx.canvas.height / rows / ticks;
|
|
scale = Math.floor(Math.min(hscale, vscale)) * subscale;
|
|
}
|
|
|
|
function drawPoint(px, py, xoffset, yoffset, unit) {
|
|
var label = px.toFixed(3) + ", " + py.toFixed(3);
|
|
var _px = px * unit + xoffset;
|
|
var _py = py * unit + yoffset;
|
|
ctx.beginPath();
|
|
ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
ctx.fillText(label, _px + 5, _py);
|
|
}
|
|
|
|
function draw(test, _at_x, _at_y, scale) {
|
|
var unit = scale * ticks;
|
|
ctx.lineWidth = 1;
|
|
var i;
|
|
for (i = 0; i <= rows * ticks; ++i) {
|
|
ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
|
|
ctx.beginPath();
|
|
ctx.moveTo(_at_x + 0, _at_y + i * scale);
|
|
ctx.lineTo(_at_x + unit * columns, _at_y + i * scale);
|
|
ctx.stroke();
|
|
}
|
|
for (i = 0; i <= columns * ticks; ++i) {
|
|
ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
|
|
ctx.beginPath();
|
|
ctx.moveTo(_at_x + i * scale, _at_y + 0);
|
|
ctx.lineTo(_at_x + i * scale, _at_y + unit * rows);
|
|
ctx.stroke();
|
|
}
|
|
|
|
var xoffset = xStart * -unit + _at_x;
|
|
var yoffset = yStart * -unit + _at_y;
|
|
|
|
ctx.fillStyle = "rgb(40,80,60)"
|
|
for (i = 0; i <= columns; i += (1 / ticks))
|
|
{
|
|
num = (xoffset - _at_x) / -unit + i;
|
|
ctx.fillText(num.toFixed(0), i * unit + _at_y - 5, 10);
|
|
}
|
|
for (i = 0; i <= rows; i += (1 / ticks))
|
|
{
|
|
num = (yoffset - _at_x) / -unit + i;
|
|
ctx.fillText(num.toFixed(0), 0, i * unit + _at_y + 0);
|
|
}
|
|
ctx.strokeStyle = "red";
|
|
var contours, verbs, pts;
|
|
for (contours in test) {
|
|
var contour = test[contours];
|
|
if (contours == 2) ctx.strokeStyle = "blue";
|
|
ctx.beginPath();
|
|
var first = true;
|
|
for (verbs in contour) {
|
|
var verb = contour[verbs];
|
|
switch (verb.length) {
|
|
case 2:
|
|
if (first) {
|
|
ctx.moveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit);
|
|
first = false;
|
|
} else
|
|
ctx.lineTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit);
|
|
break;
|
|
case 4:
|
|
ctx.quadraticCurveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit,
|
|
xoffset + verb[2] * unit, yoffset + verb[3] * unit);
|
|
break;
|
|
case 6:
|
|
ctx.bezierCurveTo(xoffset + verb[0] * unit, yoffset + verb[1] * unit,
|
|
xoffset + verb[2] * unit, yoffset + verb[3] * unit,
|
|
xoffset + verb[4] * unit, yoffset + verb[5] * unit);
|
|
break;
|
|
}
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
|
|
ctx.fillStyle="blue";
|
|
for (contours in test) {
|
|
var contour = test[contours];
|
|
for (verbs in contour) {
|
|
var verb = contour[verbs];
|
|
for (i = 0; i < verb.length; i += 2) {
|
|
x = verb[i];
|
|
y = verb[i + 1];
|
|
drawPoint(x, y, xoffset, yoffset, unit);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var mouseX = Infinity, mouseY;
|
|
|
|
function calcXY() {
|
|
var e = window.event;
|
|
var tgt = e.target || e.srcElement;
|
|
var left = tgt.offsetLeft;
|
|
var top = tgt.offsetTop;
|
|
var unit = scale * ticks;
|
|
mouseX = (e.clientX - left - Math.ceil(at_x) + 1) / unit + xStart;
|
|
mouseY = (e.clientY - top - Math.ceil(at_y)) / unit + yStart;
|
|
}
|
|
|
|
function handleMouseOver() {
|
|
calcXY();
|
|
var num = mouseX.toFixed(3) + ", " + mouseY.toFixed(3);
|
|
ctx.beginPath();
|
|
ctx.rect(300,100,200,10);
|
|
ctx.fillStyle="white";
|
|
ctx.fill();
|
|
ctx.fillStyle="black";
|
|
ctx.fillText(num, 300, 108);
|
|
}
|
|
|
|
function handleMouseClick() {
|
|
calcXY();
|
|
// drawInset();
|
|
}
|
|
|
|
function drawTop() {
|
|
init(tests[testIndex]);
|
|
redraw();
|
|
}
|
|
|
|
function redraw() {
|
|
ctx.beginPath();
|
|
ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
ctx.fillStyle="white";
|
|
ctx.fill();
|
|
draw(tests[testIndex], at_x, at_y, scale);
|
|
// if (insetScale != scale && mouseX != Infinity)
|
|
// drawInset();
|
|
}
|
|
|
|
function doKeyPress(evt) {
|
|
var char = String.fromCharCode(evt.charCode);
|
|
switch (char) {
|
|
case 'N':
|
|
case 'n':
|
|
if (++testIndex >= tests.length)
|
|
testIndex = 0;
|
|
// insetScale = scale;
|
|
mouseX = Infinity;
|
|
drawTop();
|
|
break;
|
|
case 'T':
|
|
case 't':
|
|
// drawTs(testIndex);
|
|
break;
|
|
case '-':
|
|
// if (--insetScale < 1)
|
|
// insetScale = 1;
|
|
// else
|
|
redraw();
|
|
break;
|
|
case '=':
|
|
case '+':
|
|
// ++insetScale;
|
|
redraw();
|
|
break;
|
|
}
|
|
}
|
|
|
|
function start() {
|
|
for (i = 0; i < testDivs.length; ++i) {
|
|
var str = testDivs[i].firstChild.data;
|
|
parse(str);
|
|
}
|
|
drawTop();
|
|
window.addEventListener('keypress', doKeyPress, true);
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body onLoad="start();">
|
|
<canvas id="canvas" width="1500" height="1000"
|
|
onmousemove="handleMouseOver()"
|
|
onclick="handleMouseClick()"
|
|
></canvas >
|
|
</body>
|
|
</html>
|