47d73daa7a
git-svn-id: http://skia.googlecode.com/svn/trunk@7758 2bbb7eff-a529-9590-31e7-b0007b416f81
877 lines
29 KiB
HTML
877 lines
29 KiB
HTML
<html>
|
|
<head>
|
|
<div style="height:0">
|
|
|
|
<div id="cubicOp19i">
|
|
debugShowActiveSpans id=3 (1,2 2,6 2,0 1,0) t=0 (1,2) tEnd=0.578464835 other=4 otherT=1 otherIndex=2 windSum=? windValue=1 oppValue=0
|
|
debugShowActiveSpans id=3 (1,2 2,6 2,0 1,0) t=0.578464835 (1.73152983,2) tEnd=0.692069746 other=2 otherT=0.711411698 otherIndex=1 windSum=? windValue=1 oppValue=0
|
|
debugShowActiveSpans id=3 (1,2 2,6 2,0 1,0) t=0.692069746 (1.63932765,1.25154662) tEnd=1 other=1 otherT=0.522705723 otherIndex=2 windSum=? windValue=1 oppValue=0
|
|
debugShowActiveSpans id=4 (1,0 1,2) t=0 (1,0) tEnd=0.637627564 other=3 otherT=1 otherIndex=4 windSum=? windValue=1 oppValue=0
|
|
debugShowActiveSpans id=4 (1,0 1,2) t=0.637627564 (1,1.27525508) tEnd=1 other=1 otherT=0.40824829 otherIndex=1 windSum=? windValue=1 oppValue=0
|
|
debugShowActiveSpans id=1 (0,2 0,0.5 6,2) t=0 (0,2) tEnd=0.40824829 other=2 otherT=1 otherIndex=4 windSum=? windValue=1 oppValue=0
|
|
debugShowActiveSpans id=1 (0,2 0,0.5 6,2) t=0.40824829 (1,1.27525508) tEnd=0.522705723 other=4 otherT=0.637627564 otherIndex=1 windSum=? windValue=1 oppValue=0
|
|
debugShowActiveSpans id=1 (0,2 0,0.5 6,2) t=0.522705723 (1.63932765,1.25154662) tEnd=1 other=3 otherT=0.692069746 otherIndex=3 windSum=? windValue=1 oppValue=0
|
|
debugShowActiveSpans id=2 (6,2 0,2) t=0 (6,2) tEnd=0.711411698 other=1 otherT=1 otherIndex=3 windSum=? windValue=1 oppValue=0
|
|
debugShowActiveSpans id=2 (6,2 0,2) t=0.711411698 (1.73152983,2) tEnd=0.833333333 other=3 otherT=0.578464835 otherIndex=2 windSum=? windValue=1 oppValue=0
|
|
debugShowActiveSpans id=2 (6,2 0,2) t=0.833333333 (1,2) tEnd=1 other=3 otherT=0 otherIndex=1 windSum=? windValue=1 oppValue=0
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var testDivs = [
|
|
cubicOp19i,
|
|
];
|
|
|
|
var decimal_places = 3; // make this 3 to show more precision
|
|
|
|
var tests = [];
|
|
var testTitles = [];
|
|
var testIndex = 0;
|
|
var ctx;
|
|
|
|
var xmin;
|
|
var ymin;
|
|
var scale;
|
|
var mouseX, mouseY;
|
|
var srcLeft, srcTop;
|
|
var srcWidth, srcHeight;
|
|
var screenWidth, screenHeight;
|
|
var drawnPts, drawnLines, drawnQuads, drawnCubics, deferredLines, deferredQuads, deferredCubics;
|
|
|
|
var ptLabels = true;
|
|
var digit_mode = false;
|
|
var index_mode = true;
|
|
var index_bits = -1;
|
|
var debug_xy = false;
|
|
var info_mode = false;
|
|
var intersect_mode = false;
|
|
var sequence = -1;
|
|
|
|
var SPAN_ID = 1;
|
|
var SPAN_X1 = 2;
|
|
var SPAN_Y1 = 3;
|
|
var SPAN_X2 = 4;
|
|
var SPAN_Y2 = 5;
|
|
var SPAN_L_T = 6;
|
|
var SPAN_L_TX = 7;
|
|
var SPAN_L_TY = 8;
|
|
var SPAN_L_TEND = 9;
|
|
var SPAN_L_OTHER = 10;
|
|
var SPAN_L_OTHERT = 11;
|
|
var SPAN_L_OTHERI = 12;
|
|
var SPAN_L_SUM = 13;
|
|
var SPAN_L_VAL = 14;
|
|
var SPAN_L_OPP = 15;
|
|
|
|
var SPAN_X3 = 6;
|
|
var SPAN_Y3 = 7;
|
|
var SPAN_Q_T = 8;
|
|
var SPAN_Q_TX = 9;
|
|
var SPAN_Q_TY = 10;
|
|
var SPAN_Q_TEND = 11;
|
|
var SPAN_Q_OTHER = 12;
|
|
var SPAN_Q_OTHERT = 13;
|
|
var SPAN_Q_OTHERI = 14;
|
|
var SPAN_Q_SUM = 15;
|
|
var SPAN_Q_VAL = 16;
|
|
var SPAN_Q_OPP = 17;
|
|
|
|
var SPAN_X4 = 8;
|
|
var SPAN_Y4 = 9;
|
|
var SPAN_C_T = 10;
|
|
var SPAN_C_TX = 11;
|
|
var SPAN_C_TY = 12;
|
|
var SPAN_C_TEND = 13;
|
|
var SPAN_C_OTHER = 14;
|
|
var SPAN_C_OTHERT = 15;
|
|
var SPAN_C_OTHERI = 16;
|
|
var SPAN_C_SUM = 17;
|
|
var SPAN_C_VAL = 18;
|
|
var SPAN_C_OPP = 19;
|
|
|
|
var ACTIVE_LINE_SPAN = 1;
|
|
var ACTIVE_QUAD_SPAN = 2;
|
|
var ACTIVE_CUBIC_SPAN = 3;
|
|
var INTERSECT_QUAD_LINE = 4;
|
|
var INTERSECT_QUAD_LINE_2 = 5;
|
|
var INTERSECT_QUAD_LINE_NO = 6;
|
|
var INTERSECT_QUAD = 7;
|
|
var INTERSECT_QUAD_2 = 8;
|
|
var INTERSECT_QUAD_NO = 9;
|
|
|
|
function strs_to_nums(strs) {
|
|
var result = [];
|
|
for (var idx in strs) {
|
|
var str = strs[idx];
|
|
var num = parseFloat(str);
|
|
if (isNaN(num)) {
|
|
result.push(str);
|
|
} else {
|
|
result.push(num);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function construct_regexp(pattern) {
|
|
var escape = pattern.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
|
|
escape = escape.replace(/PT_VAL/g, "(\\d+\\.?\\d*),(\\d+\\.?\\d*)");
|
|
escape = escape.replace(/T_VAL/g, "(\\d+\\.?\\d*e?-?\\d*)");
|
|
escape = escape.replace(/IDX/g, "(\\d+)");
|
|
escape = escape.replace(/OPT/g, "(\\?|-?\\d+)");
|
|
return new RegExp(escape, 'i');
|
|
}
|
|
|
|
function parse_debugShowActiveSpans(test, title) {
|
|
var re_cubic = construct_regexp(" id=IDX (PT_VAL PT_VAL PT_VAL PT_VAL) t=T_VAL (PT_VAL) tEnd=T_VAL other=IDX otherT=T_VAL otherIndex=IDX windSum=OPT windValue=IDX oppValue=IDX");
|
|
var re_quad = construct_regexp(" id=IDX (PT_VAL PT_VAL PT_VAL) t=T_VAL (PT_VAL) tEnd=T_VAL other=IDX otherT=T_VAL otherIndex=IDX windSum=OPT windValue=IDX oppValue=IDX");
|
|
var re_line = construct_regexp(" id=IDX (PT_VAL PT_VAL) t=T_VAL (PT_VAL) tEnd=T_VAL other=IDX otherT=T_VAL otherIndex=IDX windSum=OPT windValue=IDX oppValue=IDX");
|
|
|
|
var strs = test.split("debugShowActiveSpans");
|
|
if (strs.length == 1)
|
|
return;
|
|
var spans = [];
|
|
for (var s in strs) {
|
|
var str = strs[s];
|
|
if (str == "\n") {
|
|
continue;
|
|
}
|
|
if (re_line.test(str)) {
|
|
var lineStrs = re_line.exec(str);
|
|
var line = strs_to_nums(lineStrs);
|
|
spans.push(ACTIVE_LINE_SPAN);
|
|
spans.push(line);
|
|
} else if (re_quad.test(str)) {
|
|
var quadStrs = re_quad.exec(str);
|
|
var quad = strs_to_nums(quadStrs);
|
|
spans.push(ACTIVE_QUAD_SPAN);
|
|
spans.push(quad);
|
|
} else if (re_cubic.test(str)) {
|
|
var cubicStrs = re_cubic.exec(str);
|
|
var cubic = strs_to_nums(cubicStrs);
|
|
spans.push(ACTIVE_CUBIC_SPAN);
|
|
spans.push(cubic);
|
|
}
|
|
}
|
|
if (spans.length >= 1) {
|
|
tests.push(spans);
|
|
testTitles.push(title);
|
|
}
|
|
}
|
|
|
|
function filter_str_by(id, str, regex, array) {
|
|
if (regex.test(str)) {
|
|
var strs = regex.exec(str);
|
|
var result = strs_to_nums(strs);
|
|
array.push(id);
|
|
array.push(result);
|
|
}
|
|
}
|
|
|
|
// FIXME: add cubic support
|
|
function parse_intersections(test, title) {
|
|
var re_quad_line = construct_regexp(" wtTs[0]=T_VAL (PT_VAL PT_VAL PT_VAL) (PT_VAL) wnTs[0]=T_VAL (PT_VAL PT_VAL) (PT_VAL)");
|
|
var re_quad_line_2 = construct_regexp(" wtTs[0]=T_VAL (PT_VAL PT_VAL PT_VAL) (PT_VAL) wtTs[1]=T_VAL (PT_VAL) wnTs[0]=T_VAL (PT_VAL PT_VAL) (PT_VAL) wnTs[1]=T_VAL (PT_VAL)");
|
|
var re_quad_line_no_intersect = construct_regexp(" no intersect (PT_VAL PT_VAL PT_VAL) (PT_VAL PT_VAL)");
|
|
var re_quad = construct_regexp(" wtTs[0]=T_VAL (PT_VAL PT_VAL PT_VAL) (PT_VAL) wnTs[0]=T_VAL (PT_VAL PT_VAL PT_VAL) (PT_VAL)");
|
|
var re_quad_2 = construct_regexp(" wtTs[0]=T_VAL (PT_VAL PT_VAL PT_VAL) (PT_VAL) wtTs[1]=T_VAL wnTs[0]=T_VAL (PT_VAL PT_VAL PT_VAL) (PT_VAL) wnTs[1]=T_VAL");
|
|
var re_quad_no_intersect = construct_regexp(" no intersect (PT_VAL PT_VAL PT_VAL) (PT_VAL PT_VAL PT_VAL)");
|
|
|
|
var strs = test.split(/debugShow[A-Za-z]+Intersection/);
|
|
if (strs.length == 1)
|
|
return;
|
|
var spans = [];
|
|
for (var s in strs) {
|
|
var str = strs[s];
|
|
if (str == "\n") {
|
|
continue;
|
|
}
|
|
filter_str_by(INTERSECT_QUAD_LINE, str, re_quad_line, spans);
|
|
filter_str_by(INTERSECT_QUAD_LINE_2, str, re_quad_line_2, spans);
|
|
filter_str_by(INTERSECT_QUAD_LINE_NO, str, re_quad_line_no_intersect, spans);
|
|
filter_str_by(INTERSECT_QUAD, str, re_quad, spans);
|
|
filter_str_by(INTERSECT_QUAD_2, str, re_quad_2, spans);
|
|
filter_str_by(INTERSECT_QUAD_NO, str, re_quad_no_intersect, spans);
|
|
}
|
|
if (spans.length >= 1) {
|
|
tests.push(spans);
|
|
testTitles.push(title);
|
|
}
|
|
}
|
|
|
|
function init(test) {
|
|
var canvas = document.getElementById('canvas');
|
|
if (!canvas.getContext) return;
|
|
screenWidth = canvas.width = window.innerWidth - 20;
|
|
screenHeight = canvas.height = window.innerHeight - 20;
|
|
ctx = canvas.getContext('2d');
|
|
xmin = Infinity;
|
|
var xmax = -Infinity;
|
|
ymin = Infinity;
|
|
var ymax = -Infinity;
|
|
var scanType = -1;
|
|
for (var scansStr in test) {
|
|
var scans = parseInt(scansStr);
|
|
var scan = test[scans];
|
|
if (scanType == -1) {
|
|
scanType = scan;
|
|
continue;
|
|
}
|
|
if (scanType == ACTIVE_LINE_SPAN || scanType == ACTIVE_QUAD_SPAN
|
|
|| scanType == ACTIVE_CUBIC_SPAN) {
|
|
var last = scanType == ACTIVE_CUBIC_SPAN ? SPAN_X4
|
|
: scanType == ACTIVE_QUAD_SPAN ? SPAN_X3 : SPAN_X2;
|
|
for (var idx = SPAN_X1; idx <= last; idx += 2) {
|
|
xmin = Math.min(xmin, scan[idx]);
|
|
xmax = Math.max(xmax, scan[idx]);
|
|
ymin = Math.min(ymin, scan[idx + 1]);
|
|
ymax = Math.max(ymax, scan[idx + 1]);
|
|
}
|
|
} else {
|
|
var start = 1;
|
|
if (scanType != INTERSECT_QUAD_LINE_NO && scanType != INTERSECT_QUAD_NO) {
|
|
start = 2;
|
|
}
|
|
for (var idx = start; idx < start + 6; idx += 2) {
|
|
xmin = Math.min(xmin, scan[idx]);
|
|
xmax = Math.max(xmax, scan[idx]);
|
|
ymin = Math.min(ymin, scan[idx + 1]);
|
|
ymax = Math.max(ymax, scan[idx + 1]);
|
|
}
|
|
start = start + 6;
|
|
if (scanType == INTERSECT_QUAD_LINE || scanType == INTERSECT_QUAD) {
|
|
start += 3;
|
|
}
|
|
if (scanType == INTERSECT_QUAD_LINE_2) {
|
|
start += 6;
|
|
}
|
|
if (scanType == INTERSECT_QUAD_2) {
|
|
start += 4;
|
|
}
|
|
var end = start + 4;
|
|
if (scanType == INTERSECT_QUAD || scanType == INTERSECT_QUAD_2 || scanType == INTERSECT_QUAD_NO) {
|
|
end += 2;
|
|
}
|
|
for (var idx = start; idx < end; idx += 2) {
|
|
xmin = Math.min(xmin, scan[idx]);
|
|
xmax = Math.max(xmax, scan[idx]);
|
|
ymin = Math.min(ymin, scan[idx + 1]);
|
|
ymax = Math.max(ymax, scan[idx + 1]);
|
|
}
|
|
}
|
|
scanType = -1;
|
|
}
|
|
srcWidth = xmax - xmin;
|
|
srcHeight = ymax - ymin;
|
|
var hscale = ctx.canvas.width / srcWidth;
|
|
var vscale = ctx.canvas.height / srcHeight;
|
|
var minScale = Math.min(hscale, vscale);
|
|
scale = minScale;
|
|
srcLeft = xmin;
|
|
srcTop = ymin;
|
|
}
|
|
|
|
function drawPoint(px, py) {
|
|
for (var pts = 0; pts < drawnPts.length; pts += 2) {
|
|
var x = drawnPts[pts];
|
|
var y = drawnPts[pts + 1];
|
|
if (px == x && py == y) {
|
|
return;
|
|
}
|
|
}
|
|
drawnPts.push(px);
|
|
drawnPts.push(py);
|
|
var label = px.toFixed(decimal_places) + ", " + py.toFixed(decimal_places);
|
|
var _px = (px - srcLeft)* scale;
|
|
var _py = (py - srcTop) * scale;
|
|
ctx.beginPath();
|
|
ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
ctx.fillText(label, _px + 5, _py);
|
|
}
|
|
|
|
function drawLine(x1, y1, x2, y2, selected) {
|
|
for (var pts = 0; pts < drawnLines.length; pts += 4) {
|
|
if (x1 == drawnLines[pts] && y1 == drawnLines[pts + 1]) {
|
|
return;
|
|
}
|
|
if (x2 == drawnLines[pts + 2] && x2 == drawnLines[pts + 3]) {
|
|
return;
|
|
}
|
|
}
|
|
if (selected) {
|
|
drawnLines.push(x1);
|
|
drawnLines.push(y1);
|
|
drawnLines.push(x2);
|
|
drawnLines.push(y2);
|
|
ctx.beginPath();
|
|
ctx.moveTo((x1 - srcLeft) * scale,
|
|
(y1 - srcTop) * scale);
|
|
ctx.lineTo((x2 - srcLeft) * scale,
|
|
(y2 - srcTop) * scale);
|
|
ctx.stroke();
|
|
return;
|
|
}
|
|
deferredLines.push(x1);
|
|
deferredLines.push(y1);
|
|
deferredLines.push(x2);
|
|
deferredLines.push(y2);
|
|
}
|
|
|
|
function drawLinePartial(x1, y1, x2, y2, t1, t2) {
|
|
var dx = x1 - x2;
|
|
var dy = y1 - y2;
|
|
var ax = x1 - t1 * dx;
|
|
var ay = y1 - t1 * dy;
|
|
var bx = x1 - t2 * dx;
|
|
var by = y1 - t2 * dy;
|
|
ctx.beginPath();
|
|
ctx.moveTo((ax - srcLeft) * scale,
|
|
(ay - srcTop) * scale);
|
|
ctx.lineTo((bx - srcLeft) * scale,
|
|
(by - srcTop) * scale);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function drawQuad(x1, y1, x2, y2, x3, y3, selected) {
|
|
for (var pts = 0; pts < drawnQuads.length; pts += 6) {
|
|
if (x1 == drawnQuads[pts] && y1 == drawnQuads[pts + 1]) {
|
|
return;
|
|
}
|
|
if (x2 == drawnQuads[pts + 2] && x2 == drawnQuads[pts + 3]) {
|
|
return;
|
|
}
|
|
if (x2 == drawnQuads[pts + 4] && x2 == drawnQuads[pts + 5]) {
|
|
return;
|
|
}
|
|
}
|
|
if (selected) {
|
|
drawnQuads.push(x1);
|
|
drawnQuads.push(y1);
|
|
drawnQuads.push(x2);
|
|
drawnQuads.push(y2);
|
|
drawnQuads.push(x3);
|
|
drawnQuads.push(y3);
|
|
ctx.beginPath();
|
|
ctx.moveTo((x1 - srcLeft) * scale,
|
|
(y1 - srcTop) * scale);
|
|
ctx.quadraticCurveTo((x2 - srcLeft) * scale,
|
|
(y2 - srcTop) * scale,
|
|
(x3 - srcLeft) * scale,
|
|
(y3 - srcTop) * scale);
|
|
ctx.stroke();
|
|
return;
|
|
}
|
|
deferredQuads.push(x1);
|
|
deferredQuads.push(y1);
|
|
deferredQuads.push(x2);
|
|
deferredQuads.push(y2);
|
|
deferredQuads.push(x3);
|
|
deferredQuads.push(y3);
|
|
}
|
|
|
|
function interp(A, B, t) {
|
|
return A + (B - A) * t;
|
|
}
|
|
|
|
function interp_quad_coords(x1, x2, x3, t)
|
|
{
|
|
var ab = interp(x1, x2, t);
|
|
var bc = interp(x2, x3, t);
|
|
var abc = interp(ab, bc, t);
|
|
return abc;
|
|
}
|
|
|
|
function drawQuadPartial(x1, y1, x2, y2, x3, y3, t1, t2) {
|
|
var ax = interp_quad_coords(x1, x2, x3, t1);
|
|
var ay = interp_quad_coords(y1, y2, y3, t1);
|
|
var dx = interp_quad_coords(x1, x2, x3, (t1 + t2) / 2);
|
|
var dy = interp_quad_coords(y1, y2, y3, (t1 + t2) / 2);
|
|
var cx = interp_quad_coords(x1, x2, x3, t2);
|
|
var cy = interp_quad_coords(y1, y2, y3, t2);
|
|
var bx = 2*dx - (ax + cx)/2;
|
|
var by = 2*dy - (ay + cy)/2;
|
|
ctx.beginPath();
|
|
ctx.moveTo((ax - srcLeft) * scale,
|
|
(ay - srcTop) * scale);
|
|
ctx.quadraticCurveTo((bx - srcLeft) * scale,
|
|
(by - srcTop) * scale,
|
|
(cx - srcLeft) * scale,
|
|
(cy - srcTop) * scale);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function drawCubic(x1, y1, x2, y2, x3, y3, x4, y4, selected) {
|
|
for (var pts = 0; pts < drawnCubics.length; pts += 8) {
|
|
if (x1 == drawnCubics[pts] && y1 == drawnCubics[pts + 1]) {
|
|
return;
|
|
}
|
|
if (x2 == drawnCubics[pts + 2] && x2 == drawnCubics[pts + 3]) {
|
|
return;
|
|
}
|
|
if (x2 == drawnCubics[pts + 4] && x2 == drawnCubics[pts + 5]) {
|
|
return;
|
|
}
|
|
if (x2 == drawnCubics[pts + 6] && x2 == drawnCubics[pts + 7]) {
|
|
return;
|
|
}
|
|
}
|
|
if (selected) {
|
|
drawnCubics.push(x1);
|
|
drawnCubics.push(y1);
|
|
drawnCubics.push(x2);
|
|
drawnCubics.push(y2);
|
|
drawnCubics.push(x3);
|
|
drawnCubics.push(y3);
|
|
drawnCubics.push(x4);
|
|
drawnCubics.push(y4);
|
|
ctx.beginPath();
|
|
ctx.moveTo((x1 - srcLeft) * scale,
|
|
(y1 - srcTop) * scale);
|
|
ctx.bezierCurveTo((x2 - srcLeft) * scale,
|
|
(y2 - srcTop) * scale,
|
|
(x3 - srcLeft) * scale,
|
|
(y3 - srcTop) * scale,
|
|
(x4 - srcLeft) * scale,
|
|
(y4 - srcTop) * scale);
|
|
ctx.stroke();
|
|
return;
|
|
}
|
|
deferredCubics.push(x1);
|
|
deferredCubics.push(y1);
|
|
deferredCubics.push(x2);
|
|
deferredCubics.push(y2);
|
|
deferredCubics.push(x3);
|
|
deferredCubics.push(y3);
|
|
deferredCubics.push(x4);
|
|
deferredCubics.push(y4);
|
|
}
|
|
|
|
function interp_cubic_coords(x1, x2, x3, x4, t)
|
|
{
|
|
var ab = interp(x1, x2, t);
|
|
var bc = interp(x2, x3, t);
|
|
var cd = interp(x3, x4, t);
|
|
var abc = interp(ab, bc, t);
|
|
var bcd = interp(bc, cd, t);
|
|
var abcd = interp(abc, bcd, t);
|
|
return abcd;
|
|
}
|
|
|
|
function drawCubicPartial(x1, y1, x2, y2, x3, y3, x4, y4, t1, t2) {
|
|
var ax = interp_cubic_coords(x1, x2, x3, x4, t1);
|
|
var ay = interp_cubic_coords(y1, y2, y3, y4, t1);
|
|
var ex = interp_cubic_coords(x1, x2, x3, x4, (t1*2+t2)/3);
|
|
var ey = interp_cubic_coords(y1, y2, y3, y4, (t1*2+t2)/3);
|
|
var fx = interp_cubic_coords(x1, x2, x3, x4, (t1+t2*2)/3);
|
|
var fy = interp_cubic_coords(y1, y2, y3, y4, (t1+t2*2)/3);
|
|
var dx = interp_cubic_coords(x1, x2, x3, x4, t2);
|
|
var dy = interp_cubic_coords(y1, y2, y3, y4, t2);
|
|
var mx = ex * 27 - ax * 8 - dx;
|
|
var my = ey * 27 - ay * 8 - dy;
|
|
var nx = fx * 27 - ax - dx * 8;
|
|
var ny = fy * 27 - ay - dy * 8;
|
|
var bx = (mx * 2 - nx) / 18;
|
|
var by = (my * 2 - ny) / 18;
|
|
var cx = (nx * 2 - mx) / 18;
|
|
var cy = (ny * 2 - my) / 18;
|
|
ctx.beginPath();
|
|
ctx.moveTo((ax - srcLeft) * scale,
|
|
(ay - srcTop) * scale);
|
|
ctx.bezierCurveTo((bx - srcLeft) * scale,
|
|
(by - srcTop) * scale,
|
|
(cx - srcLeft) * scale,
|
|
(cy - srcTop) * scale,
|
|
(dx - srcLeft) * scale,
|
|
(dy - srcTop) * scale,
|
|
(ex - srcLeft) * scale,
|
|
(ey - srcTop) * scale);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function drawPartial(test) {
|
|
ctx.lineWidth = 3;
|
|
ctx.strokeStyle = "rgba(0,0,255, 0.3)";
|
|
var scanType = -1;
|
|
var partIndex = 0;
|
|
for (var scansStr in test) {
|
|
var scans = parseInt(scansStr);
|
|
var scan = test[scans];
|
|
if (scanType == -1) {
|
|
scanType = scan;
|
|
continue;
|
|
}
|
|
partIndex++;
|
|
var hasId = scanType == ACTIVE_LINE_SPAN || scanType == ACTIVE_QUAD_SPAN
|
|
|| scanType == ACTIVE_CUBIC_SPAN ? SPAN_ID : -1;
|
|
if (hasId < 0) {
|
|
continue;
|
|
}
|
|
var types = [scanType == ACTIVE_LINE_SPAN ? 0 : scanType == ACTIVE_QUAD_SPAN ? 1 : 2];
|
|
var x1 = scan[SPAN_X1];
|
|
var y1 = scan[SPAN_Y1];
|
|
var x2 = scan[SPAN_X2];
|
|
var y2 = scan[SPAN_Y2];
|
|
var x3, y3, x3, y4, t1, t2;
|
|
switch(scanType) {
|
|
case ACTIVE_LINE_SPAN:
|
|
t1 = scan[SPAN_L_T];
|
|
t2 = scan[SPAN_L_TEND];
|
|
drawLinePartial(x1, y1, x2, y2, t1, t2);
|
|
break;
|
|
case ACTIVE_QUAD_SPAN:
|
|
x3 = scan[SPAN_X3];
|
|
y3 = scan[SPAN_Y3];
|
|
t1 = scan[SPAN_Q_T];
|
|
t2 = scan[SPAN_Q_TEND];
|
|
drawQuadPartial(x1, y1, x2, y2, x3, y3, t1, t2);
|
|
break;
|
|
case ACTIVE_CUBIC_SPAN:
|
|
x3 = scan[SPAN_X3];
|
|
y3 = scan[SPAN_Y3];
|
|
x4 = scan[SPAN_X4];
|
|
y4 = scan[SPAN_Y4];
|
|
t1 = scan[SPAN_C_T];
|
|
t2 = scan[SPAN_C_TEND];
|
|
drawCubicPartial(x1, y1, x2, y2, x3, y3, x4, y4, t1, t2);
|
|
break;
|
|
}
|
|
scanType = -1;
|
|
}
|
|
}
|
|
|
|
function drawDeferred() {
|
|
for (var pts = 0; pts < deferredCubics.length; pts += 8) {
|
|
drawCubic(deferredCubics[pts], deferredCubics[pts + 1],
|
|
deferredCubics[pts + 2], deferredCubics[pts + 3],
|
|
deferredCubics[pts + 4], deferredCubics[pts + 5],
|
|
deferredCubics[pts + 6], deferredCubics[pts + 7], true);
|
|
}
|
|
for (var pts = 0; pts < deferredQuads.length; pts += 6) {
|
|
drawQuad(deferredQuads[pts], deferredQuads[pts + 1],
|
|
deferredQuads[pts + 2], deferredQuads[pts + 3],
|
|
deferredQuads[pts + 4], deferredQuads[pts + 5], true);
|
|
}
|
|
for (var pts = 0; pts < deferredLines.length; pts += 4) {
|
|
drawLine(deferredLines[pts], deferredLines[pts + 1],
|
|
deferredLines[pts + 2], deferredLines[pts + 3], true);
|
|
}
|
|
}
|
|
|
|
function draw(test, title) {
|
|
ctx.fillStyle = "rgba(0,0,0, 0.1)";
|
|
ctx.font = "normal 50px Arial";
|
|
ctx.fillText(title, 50, 50);
|
|
ctx.font = "normal 10px Arial";
|
|
ctx.lineWidth = "1.001"; "0.999";
|
|
var curId = -1;
|
|
var firstIdx;
|
|
var lastIdx;
|
|
var index_tst = -1;
|
|
drawnPts = [];
|
|
drawnLines = [];
|
|
drawnQuads = [];
|
|
drawnCubics = [];
|
|
deferredLines = [];
|
|
deferredQuads = [];
|
|
deferredCubics = [];
|
|
var scanType = -1;
|
|
var partIndex = 0;
|
|
for (var scansStr in test) {
|
|
var scans = parseInt(scansStr);
|
|
var scan = test[scans];
|
|
if (scanType == -1) {
|
|
scanType = scan;
|
|
continue;
|
|
}
|
|
partIndex++;
|
|
var hasId = scanType == ACTIVE_LINE_SPAN || scanType == ACTIVE_QUAD_SPAN
|
|
|| scanType == ACTIVE_CUBIC_SPAN ? SPAN_ID : -1;
|
|
if (hasId >= 0 && curId != scan[hasId]) {
|
|
curId = scan[hasId];
|
|
firstIdx = lastIdx = partIndex;
|
|
index_tst++;
|
|
var nextIdx = lastIdx + 1;
|
|
while (nextIdx * 2 < test.length && test[nextIdx * 2][hasId] == curId) {
|
|
lastIdx = nextIdx++;
|
|
}
|
|
} else if (hasId < 0) {
|
|
firstIdx = lastIdx = partIndex;
|
|
index_tst++;
|
|
}
|
|
var seq = sequence % (test.length / 2);
|
|
var selected = sequence >= 0 ? seq == partIndex
|
|
: (index_bits & (1 << index_tst)) != 0 && partIndex == firstIdx;
|
|
var skippable = (sequence >= 0 && seq >= firstIdx && seq <= lastIdx)
|
|
|| partIndex != firstIdx;
|
|
if (skippable && !selected) {
|
|
scanType = -1;
|
|
continue;
|
|
}
|
|
var types = [scanType == ACTIVE_LINE_SPAN ? 0 : scanType == ACTIVE_QUAD_SPAN ? 1 : 2];
|
|
var pts = [];
|
|
if (scanType == ACTIVE_LINE_SPAN || scanType == ACTIVE_QUAD_SPAN || scanType == ACTIVE_CUBIC_SPAN) {
|
|
pts.push(SPAN_X1);
|
|
} else {
|
|
pts.push(scanType != INTERSECT_QUAD_NO && scanType != INTERSECT_QUAD_LINE_NO ? 2 : 1);
|
|
types.push(scanType == INTERSECT_QUAD_NO || scanType == INTERSECT_QUAD || scanType == INTERSECT_QUAD_2 ? 1 : 0);
|
|
pts.push(scanType == INTERSECT_QUAD_LINE || scanType == INTERSECT_QUAD ? 11
|
|
: scanType == INTERSECT_QUAD_LINE_2 ? 14 : scanType == INTERSECT_QUAD_2 ? 12 : 7);
|
|
}
|
|
ctx.strokeStyle = "red";
|
|
for (var typeIndex = 0; typeIndex < types.length; ++typeIndex) {
|
|
var type = types[typeIndex];
|
|
var index = pts[typeIndex];
|
|
if (type == 2) {
|
|
drawCubic(scan[index + 0], scan[index + 1], scan[index + 2], scan[index + 3],
|
|
scan[index + 4], scan[index + 5], scan[index + 6], scan[index + 7],
|
|
selected);
|
|
} else if (type == 1) {
|
|
drawQuad(scan[index + 0], scan[index + 1], scan[index + 2], scan[index + 3],
|
|
scan[index + 4], scan[index + 5], selected);
|
|
} else {
|
|
drawLine(scan[index + 0], scan[index + 1], scan[index + 2], scan[index + 3],
|
|
selected);
|
|
}
|
|
}
|
|
if (debug_xy && selected) {
|
|
var debugText = "";
|
|
for (var typeIndex = 0; typeIndex < types.length; ++typeIndex) {
|
|
var type = types[typeIndex];
|
|
var index = pts[typeIndex];
|
|
for (var idx = pts[typeIndex]; idx < pts[typeIndex] + (type + 1) * 2; idx += 2) {
|
|
var screenX = (scan[idx] - srcLeft) * scale;
|
|
var screenY = (scan[idx + 1] - srcTop) * scale;
|
|
debugText += screenX.toFixed(decimal_places) + ", ";
|
|
debugText += screenY.toFixed(decimal_places) + " ";
|
|
}
|
|
}
|
|
ctx.fillStyle="blue";
|
|
ctx.fillText(debugText, 50, partIndex * 50 + 100);
|
|
}
|
|
if (ptLabels && selected) {
|
|
ctx.fillStyle="blue";
|
|
for (var typeIndex = 0; typeIndex < types.length; ++typeIndex) {
|
|
var type = types[typeIndex];
|
|
var index = pts[typeIndex];
|
|
for (var idx = pts[typeIndex]; idx < pts[typeIndex] + (type + 1) * 2; idx += 2) {
|
|
drawPoint(scan[idx], scan[idx + 1]);
|
|
}
|
|
}
|
|
}
|
|
var infoText = "";
|
|
if (info_mode && selected) {
|
|
infoText += hasId >= 0 ? "id=" + scan[hasId] : partIndex;
|
|
}
|
|
if (intersect_mode && selected) {
|
|
if (scanType == ACTIVE_CUBIC_SPAN) {
|
|
infoText += " t=" + scan[SPAN_C_T];
|
|
} else if (scanType == ACTIVE_QUAD_SPAN) {
|
|
infoText += " t=" + scan[SPAN_Q_T];
|
|
} else if (scanType == ACTIVE_LINE_SPAN) {
|
|
infoText += " t=" + scan[SPAN_L_T];
|
|
} else if (scanType == INTERSECT_QUAD_LINE ||scanType == INTERSECT_QUAD) {
|
|
infoText += " t0[0]=" + scan[1] + " t1[0]=" + scan[10];
|
|
} else if (scanType == INTERSECT_QUAD_LINE_2 || scanType == INTERSECT_QUAD_2) {
|
|
infoText += " t0[0]=" + scan[1] + " t0[1]=" + scan[10] + " t1[0]=" + scan[13];
|
|
if (scanType == INTERSECT_QUAD_LINE_2) {
|
|
infoText += " t1[1]=" + scan[18];
|
|
} else {
|
|
infoText += " t0[1]=" + scan[20];
|
|
}
|
|
}
|
|
}
|
|
if (infoText.length > 0) {
|
|
ctx.fillStyle="green";
|
|
ctx.fillText(infoText, 10, (hasId >= 0 && sequence >= 0
|
|
? hasId : partIndex) * 30 + 50);
|
|
}
|
|
if (intersect_mode && selected) {
|
|
ctx.fillStyle="rgba(50,100,200, 1.0)";
|
|
if (scanType == ACTIVE_CUBIC_SPAN) {
|
|
drawPoint(scan[SPAN_C_TX], scan[SPAN_C_TY]);
|
|
} else if (scanType == ACTIVE_QUAD_SPAN) {
|
|
drawPoint(scan[SPAN_Q_TX], scan[SPAN_Q_TY]);
|
|
} else if (scanType == ACTIVE_LINE_SPAN) {
|
|
drawPoint(scan[SPAN_L_TX], scan[SPAN_L_TY]);
|
|
} else if (scanType != INTERSECT_QUAD_NO && scanType != INTERSECT_QUAD_LINE_NO) {
|
|
drawPoint(scan[8], scan[9]);
|
|
if (scanType == INTERSECT_QUAD_LINE_2 || scanType == INTERSECT_QUAD_2) {
|
|
drawPoint(scan[11], scan[12]);
|
|
}
|
|
}
|
|
}
|
|
ctx.strokeStyle = "rgba(0,0,0, 0.2)";
|
|
scanType = -1;
|
|
}
|
|
drawDeferred();
|
|
drawPartial(test);
|
|
}
|
|
|
|
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], testTitles[testIndex]);
|
|
}
|
|
|
|
function doKeyPress(evt) {
|
|
var char = String.fromCharCode(evt.charCode);
|
|
switch (char) {
|
|
case '0':
|
|
case '1':
|
|
case '2':
|
|
case '3':
|
|
case '4':
|
|
case '5':
|
|
case '6':
|
|
case '7':
|
|
case '8':
|
|
case '9':
|
|
if (digit_mode) {
|
|
decimal_places = char - '0';
|
|
} else if (index_mode) {
|
|
index_bits ^= 1 << (char - '0');
|
|
}
|
|
redraw();
|
|
break;
|
|
case 'd':
|
|
digit_mode = true;
|
|
index_mode = false;
|
|
break;
|
|
case 'f':
|
|
info_mode ^= true;
|
|
redraw();
|
|
break;
|
|
case 'i':
|
|
digit_mode = false;
|
|
if (sequence >= 0) {
|
|
sequence = -1;
|
|
index_mode = false;
|
|
} else {
|
|
index_mode ^= true;
|
|
}
|
|
if (index_mode) {
|
|
index_bits = 0;
|
|
} else {
|
|
index_bits = -1;
|
|
}
|
|
redraw();
|
|
break;
|
|
case 'N':
|
|
testIndex += 9;
|
|
case 'n':
|
|
if (++testIndex >= tests.length)
|
|
testIndex = 0;
|
|
drawTop();
|
|
break;
|
|
case 'P':
|
|
testIndex -= 9;
|
|
case 'p':
|
|
if (--testIndex < 0)
|
|
testIndex = tests.length - 1;
|
|
drawTop();
|
|
break;
|
|
case 's':
|
|
sequence++;
|
|
redraw();
|
|
break;
|
|
case 'S':
|
|
sequence--;
|
|
if (sequence < 0) {
|
|
sequence = 0;
|
|
}
|
|
redraw();
|
|
break;
|
|
case 't':
|
|
intersect_mode ^= true;
|
|
redraw();
|
|
break;
|
|
case 'x':
|
|
ptLabels ^= true;
|
|
redraw();
|
|
break;
|
|
case 'y':
|
|
debug_xy ^= true;
|
|
redraw();
|
|
break;
|
|
case '-':
|
|
scale /= 2;
|
|
calcLeftTop();
|
|
redraw();
|
|
break;
|
|
case '=':
|
|
case '+':
|
|
scale *= 2;
|
|
calcLeftTop();
|
|
redraw();
|
|
break;
|
|
}
|
|
}
|
|
|
|
function calcXY() {
|
|
var e = window.event;
|
|
var tgt = e.target || e.srcElement;
|
|
var left = tgt.offsetLeft;
|
|
var top = tgt.offsetTop;
|
|
var unit = scale;
|
|
mouseX = (e.clientX - left) / scale + srcLeft;
|
|
mouseY = (e.clientY - top) / scale + srcTop;
|
|
}
|
|
|
|
function calcLeftTop() {
|
|
srcLeft = mouseX - screenWidth / 2 / scale;
|
|
srcTop = mouseY - screenHeight / 2 / scale;
|
|
}
|
|
|
|
function handleMouseClick() {
|
|
calcXY();
|
|
calcLeftTop();
|
|
redraw();
|
|
}
|
|
|
|
function handleMouseOver() {
|
|
calcXY();
|
|
var num = mouseX.toFixed(decimal_places) + ", " + mouseY.toFixed(decimal_places);
|
|
ctx.beginPath();
|
|
ctx.rect(300,100,200,10);
|
|
ctx.fillStyle="white";
|
|
ctx.fill();
|
|
ctx.fillStyle="black";
|
|
ctx.fillText(num, 300, 108);
|
|
}
|
|
|
|
function start() {
|
|
for (i = 0; i < testDivs.length; ++i) {
|
|
var title = testDivs[i].id.toString();
|
|
var str = testDivs[i].firstChild.data;
|
|
parse_debugShowActiveSpans(str, title);
|
|
parse_intersections(str, title);
|
|
}
|
|
drawTop();
|
|
window.addEventListener('keypress', doKeyPress, true);
|
|
window.onresize = function() {
|
|
drawTop();
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body onLoad="start();">
|
|
<canvas id="canvas" width="750" height="500"
|
|
onmousemove="handleMouseOver()"
|
|
onclick="handleMouseClick()"
|
|
></canvas >
|
|
</body>
|
|
</html>
|