| <html> |
| <head> |
| <div style="height:0"> |
| |
| <div id="cubicOp25i"> |
| debugShowActiveSpans id=1 (0,1 2,4 5,0 3,2) t=0.466666667 (2.84355545,1.9478519) tEnd=0.605057566 other=2 otherT=0.0521481481 otherIndex=1 windSum=-1 windValue=1 oppValue=0 |
| debugShowActiveSpans id=2 (3,2 0,1) t=0.0521481481 (2.84355545,1.9478519) tEnd=0.377811276 other=1 otherT=0.466666667 otherIndex=2 windSum=1 windValue=1 oppValue=0 |
| </div> |
| |
| <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 id="cubicOp28u"> |
| debugShowActiveSpans id=3 (0,6 2,3 1,0 4,1) t=0 (0,6) tEnd=0.473902244 other=4 otherT=1 otherIndex=3 windSum=? windValue=1 oppValue=0 |
| debugShowActiveSpans id=3 (0,6 2,3 1,0 4,1) t=0.473902244 (1.5671773,2.16060209) tEnd=0.57224743 other=1 otherT=0.287206281 otherIndex=1 windSum=? windValue=1 oppValue=0 |
| debugShowActiveSpans id=3 (0,6 2,3 1,0 4,1) t=0.57224743 (1.79802597,1.59934199) tEnd=1 other=2 otherT=0.400657994 otherIndex=2 windSum=? windValue=1 oppValue=0 |
| debugShowActiveSpans id=4 (4,1 0,6) t=0 (4,1) tEnd=0.13678207 other=3 otherT=1 otherIndex=3 windSum=? windValue=1 oppValue=0 |
| debugShowActiveSpans id=4 (4,1 0,6) t=0.13678207 (3.4528718,1.68391037) tEnd=0.145041093 other=1 otherT=0.583645693 otherIndex=3 windSum=? windValue=1 oppValue=0 |
| debugShowActiveSpans id=4 (4,1 0,6) t=0.145041093 (3.41983557,1.72520542) tEnd=1 other=1 otherT=0.945703361 otherIndex=6 windSum=? windValue=1 oppValue=0 |
| debugShowActiveSpans id=1 (0,1 1,4 6,0 3,2) t=0 (0,1) tEnd=0.287206281 other=2 otherT=1 otherIndex=3 windSum=? windValue=1 oppValue=0 |
| debugShowActiveSpans id=1 (0,1 1,4 6,0 3,2) t=0.287206281 (1.5671773,2.16060209) tEnd=0.470588235 other=3 otherT=0.473902244 otherIndex=1 windSum=? windValue=1 oppValue=0 |
| debugShowActiveSpans id=1 (0,1 1,4 6,0 3,2) t=0.470588235 (2.81864452,1.93954813) tEnd=0.583645693 other=2 otherT=0.0604518624 otherIndex=1 windSum=? windValue=1 oppValue=0 |
| debugShowActiveSpans id=1 (0,1 1,4 6,0 3,2) t=0.583645693 (3.4528718,1.68391037) tEnd=0.614942976 other=4 otherT=0.13678207 otherIndex=1 windSum=? windValue=1 oppValue=0 |
| debugShowActiveSpans id=1 (0,1 1,4 6,0 3,2) t=0.614942976 (3.59216309,1.61630249) tEnd=0.916307024 other=1 otherT=0.916307024 otherIndex=5 windSum=? windValue=1 oppValue=0 |
| debugShowActiveSpans id=1 (0,1 1,4 6,0 3,2) t=0.916307024 (3.59216309,1.61630249) tEnd=0.945703361 other=1 otherT=0.614942976 otherIndex=4 windSum=? windValue=1 oppValue=0 |
| debugShowActiveSpans id=1 (0,1 1,4 6,0 3,2) t=0.945703361 (3.41983557,1.72520542) tEnd=1 other=4 otherT=0.145041093 otherIndex=2 windSum=? windValue=1 oppValue=0 |
| debugShowActiveSpans id=2 (3,2 0,1) t=0 (3,2) tEnd=0.0604518624 other=1 otherT=1 otherIndex=7 windSum=? windValue=1 oppValue=0 |
| debugShowActiveSpans id=2 (3,2 0,1) t=0.0604518624 (2.81864452,1.93954813) tEnd=0.400657994 other=1 otherT=0.470588235 otherIndex=2 windSum=? windValue=1 oppValue=0 |
| debugShowActiveSpans id=2 (3,2 0,1) t=0.400657994 (1.79802597,1.59934199) tEnd=1 other=3 otherT=0.57224743 otherIndex=2 windSum=? windValue=1 oppValue=0 |
| </div> |
| |
| </div> |
| |
| <script type="text/javascript"> |
| |
| var testDivs = [ |
| cubicOp28u, |
| cubicOp25i, |
| 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> |