Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(71)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: tools/pathops_sorter.htm

Issue 428963004: add cubic red option to pathops tool (Closed) Base URL: https://skia.googlesource.com/skia.git@master
Patch Set: Created 6 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 2
3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
4 <head> 4 <head>
5 <meta charset="utf-8" /> 5 <meta charset="utf-8" />
6 <title></title> 6 <title></title>
7 <div style="height:0"> 7 <div style="height:0">
8 8
9 <div id="quad1"> 9 <div id="quad1">
10 {{3.13,2.74}, {1.08,4.62}, {3.71,0.94}} 10 {{3.13,2.74}, {1.08,4.62}, {3.71,0.94}}
(...skipping 940 matching lines...) Expand 10 before | Expand all | Expand 10 after
951 <div id="skpcarrot_is24x"> 951 <div id="skpcarrot_is24x">
952 {{{1020.08099, 672.16198699999995}, {1020.08002, 630.73999000000003}, {986.50201 400000003, 597.16198699999995}, {945.08099400000003, 597.16198699999995}}} 952 {{{1020.08099, 672.16198699999995}, {1020.08002, 630.73999000000003}, {986.50201 400000003, 597.16198699999995}, {945.08099400000003, 597.16198699999995}}}
953 {{{1020, 672}, {1020, 640.93395999999996}, {998.03301999999996, 618.966980000000 04}}} 953 {{{1020, 672}, {1020, 640.93395999999996}, {998.03301999999996, 618.966980000000 04}}}
954 </div> 954 </div>
955 955
956 <div id="skpwww_9to5mac_com_64"> 956 <div id="skpwww_9to5mac_com_64">
957 {{{{365.848175,5081.15186}, {368,5103}}}, 957 {{{{365.848175,5081.15186}, {368,5103}}},
958 {{{367.967712,5102.61084}, {368.278717,5105.71045}}}}, 958 {{{367.967712,5102.61084}, {368.278717,5105.71045}}}},
959 </div> 959 </div>
960 960
961 <div id="issue2753">
962 {{50.6,117.001}, {50.6,117.001}, {164.601,85.2}, {188.201,117.601}},
963 {{188.201,117.601}, {188.201,117.601}, {174.801,93}, {39,124.001}},
964 computed quadratics set
965 {{50.6,117.001}, {52.4926111,116.112083}, {81.0298889,109.956333}},
966 {{81.0298889,109.956333}, {109.567167,103.800583}, {142.037778,103.045}},
967 {{142.037778,103.045}, {174.508389,102.289417}, {188.201,117.601}},
968 computed quadratics set
969 {{188.201,117.601}, {189.210269,116.85838}, {179.697259,112.371148}},
970 {{179.697259,112.371148}, {170.18425,107.883917}, {138.037741,108.563519}},
971 {{138.037741,108.563519}, {105.891231,109.24312}, {39,124.001}},
972 </div>
973
961 </div> 974 </div>
962 975
963 <script type="text/javascript"> 976 <script type="text/javascript">
964 977
965 var testDivs = [ 978 var testDivs = [
979 issue2753,
966 skpwww_9to5mac_com_64, 980 skpwww_9to5mac_com_64,
967 skpcarrot_is24x, 981 skpcarrot_is24x,
968 skpwww_wartepop_blogspot_com_br_6, 982 skpwww_wartepop_blogspot_com_br_6,
969 skpwww_wartepop_blogspot_com_br_6a, 983 skpwww_wartepop_blogspot_com_br_6a,
970 skpwww_galaxystwo_com_4, 984 skpwww_galaxystwo_com_4,
971 skpwww_kitcheninspirations_wordpress_com_66, 985 skpwww_kitcheninspirations_wordpress_com_66,
972 skpwww_tcmevents_org_13, 986 skpwww_tcmevents_org_13,
973 skpwww_aceinfographics_com_106, 987 skpwww_aceinfographics_com_106,
974 skpwww_educationalcraft_com_4b, 988 skpwww_educationalcraft_com_4b,
975 skpwww_educationalcraft_com_4a, 989 skpwww_educationalcraft_com_4a,
(...skipping 169 matching lines...) Expand 10 before | Expand all | Expand 10 after
1145 var curveT = 0; 1159 var curveT = 0;
1146 1160
1147 var lastX, lastY; 1161 var lastX, lastY;
1148 var activeCurve = []; 1162 var activeCurve = [];
1149 var activePt; 1163 var activePt;
1150 1164
1151 var decimal_places = 3; 1165 var decimal_places = 3;
1152 1166
1153 var draw_t = false; 1167 var draw_t = false;
1154 var draw_closest_t = false; 1168 var draw_closest_t = false;
1169 var draw_cubic_red = false;
1155 var draw_derivative = false; 1170 var draw_derivative = false;
1156 var draw_endpoints = true; 1171 var draw_endpoints = true;
1157 var draw_midpoint = 0; 1172 var draw_midpoint = 0;
1158 var draw_mouse_xy = false; 1173 var draw_mouse_xy = false;
1159 var draw_order = false; 1174 var draw_order = false;
1160 var draw_point_xy = false; 1175 var draw_point_xy = false;
1161 var draw_ray_intersect = false; 1176 var draw_ray_intersect = false;
1162 var draw_quarterpoint = 0; 1177 var draw_quarterpoint = 0;
1163 var draw_tangents = 1; 1178 var draw_tangents = 1;
1164 var draw_sortpoint = 0; 1179 var draw_sortpoint = 0;
(...skipping 541 matching lines...) Expand 10 before | Expand all | Expand 10 after
1706 1721
1707 // console.log("midLeft=" + midLeft + " startCross=" + startCross); 1722 // console.log("midLeft=" + midLeft + " startCross=" + startCross);
1708 var intersectIndex = 0; 1723 var intersectIndex = 0;
1709 for (var curves in test) { 1724 for (var curves in test) {
1710 var curve = test[curves]; 1725 var curve = test[curves];
1711 if (curve.length != 4 && curve.length != 6 && curve.length != 8) { 1726 if (curve.length != 4 && curve.length != 6 && curve.length != 8) {
1712 continue; 1727 continue;
1713 } 1728 }
1714 ctx.lineWidth = 1; 1729 ctx.lineWidth = 1;
1715 if (draw_tangents != 0) { 1730 if (draw_tangents != 0) {
1716 if (firstInside == curves) { 1731 if (draw_cubic_red ? curve.length == 8 : firstInside == curves) {
1717 ctx.strokeStyle = "rgba(255,0,0, 0.3)"; 1732 ctx.strokeStyle = "rgba(255,0,0, 0.3)";
1718 } else { 1733 } else {
1719 ctx.strokeStyle = "rgba(0,0,255, 0.3)"; 1734 ctx.strokeStyle = "rgba(0,0,255, 0.3)";
1720 } 1735 }
1721 drawLine(curve[0], curve[1], curve[2], curve[3]); 1736 drawLine(curve[0], curve[1], curve[2], curve[3]);
1722 if (draw_tangents != 2) { 1737 if (draw_tangents != 2) {
1723 if (curve.length > 4) drawLine(curve[2], curve[3], curve[4], curve[5]); 1738 if (curve.length > 4) drawLine(curve[2], curve[3], curve[4], curve[5]);
1724 if (curve.length > 6) drawLine(curve[4], curve[5], curve[6], curve[7]); 1739 if (curve.length > 6) drawLine(curve[4], curve[5], curve[6], curve[7]);
1725 } 1740 }
1726 if (draw_tangents != 1) { 1741 if (draw_tangents != 1) {
1727 if (curve.length == 6) drawLine(curve[0], curve[1], curve[4] , curve[5]); 1742 if (curve.length == 6) drawLine(curve[0], curve[1], curve[4] , curve[5]);
1728 if (curve.length == 8) drawLine(curve[0], curve[1], curve[6] , curve[7]); 1743 if (curve.length == 8) drawLine(curve[0], curve[1], curve[6] , curve[7]);
1729 } 1744 }
1730 } 1745 }
1731 ctx.beginPath(); 1746 ctx.beginPath();
1732 ctx.moveTo((curve[0] - srcLeft) * scale, (curve[1] - srcTop) * scale ); 1747 ctx.moveTo((curve[0] - srcLeft) * scale, (curve[1] - srcTop) * scale );
1733 if (curve.length == 4) { 1748 if (curve.length == 4) {
1734 ctx.lineTo((curve[2] - srcLeft) * scale, (curve[3] - srcTop) * s cale); 1749 ctx.lineTo((curve[2] - srcLeft) * scale, (curve[3] - srcTop) * s cale);
1735 } else if (curve.length == 6) { 1750 } else if (curve.length == 6) {
1736 ctx.quadraticCurveTo( 1751 ctx.quadraticCurveTo(
1737 (curve[2] - srcLeft) * scale, (curve[3] - srcTop) * scale, 1752 (curve[2] - srcLeft) * scale, (curve[3] - srcTop) * scale,
1738 (curve[4] - srcLeft) * scale, (curve[5] - srcTop) * scale); 1753 (curve[4] - srcLeft) * scale, (curve[5] - srcTop) * scale);
1739 } else { 1754 } else {
1740 ctx.bezierCurveTo( 1755 ctx.bezierCurveTo(
1741 (curve[2] - srcLeft) * scale, (curve[3] - srcTop) * scale, 1756 (curve[2] - srcLeft) * scale, (curve[3] - srcTop) * scale,
1742 (curve[4] - srcLeft) * scale, (curve[5] - srcTop) * scale, 1757 (curve[4] - srcLeft) * scale, (curve[5] - srcTop) * scale,
1743 (curve[6] - srcLeft) * scale, (curve[7] - srcTop) * scale); 1758 (curve[6] - srcLeft) * scale, (curve[7] - srcTop) * scale);
1744 } 1759 }
1745 if (firstInside == curves) { 1760 if (draw_cubic_red ? curve.length == 8 : firstInside == curves) {
1746 ctx.strokeStyle = "rgba(255,0,0, 1)"; 1761 ctx.strokeStyle = "rgba(255,0,0, 1)";
1747 } else { 1762 } else {
1748 ctx.strokeStyle = "rgba(0,0,255, 1)"; 1763 ctx.strokeStyle = "rgba(0,0,255, 1)";
1749 } 1764 }
1750 ctx.stroke(); 1765 ctx.stroke();
1751 if (draw_endpoints) { 1766 if (draw_endpoints) {
1752 drawPoint(curve[0], curve[1]); 1767 drawPoint(curve[0], curve[1]);
1753 drawPoint(curve[2], curve[3]); 1768 drawPoint(curve[2], curve[3]);
1754 if (curve.length > 4) drawPoint(curve[4], curve[5]); 1769 if (curve.length > 4) drawPoint(curve[4], curve[5]);
1755 if (curve.length > 6) drawPoint(curve[6], curve[7]); 1770 if (curve.length > 6) drawPoint(curve[6], curve[7]);
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after
1817 if (draw_order) { 1832 if (draw_order) {
1818 var px = x_at_t(curve, 0.75); 1833 var px = x_at_t(curve, 0.75);
1819 var py = y_at_t(curve, 0.75); 1834 var py = y_at_t(curve, 0.75);
1820 var _px = (px - srcLeft) * scale; 1835 var _px = (px - srcLeft) * scale;
1821 var _py = (py - srcTop) * scale; 1836 var _py = (py - srcTop) * scale;
1822 ctx.beginPath(); 1837 ctx.beginPath();
1823 ctx.arc(_px, _py, 15, 0, Math.PI * 2, true); 1838 ctx.arc(_px, _py, 15, 0, Math.PI * 2, true);
1824 ctx.closePath(); 1839 ctx.closePath();
1825 ctx.fillStyle = "white"; 1840 ctx.fillStyle = "white";
1826 ctx.fill(); 1841 ctx.fill();
1827 if (firstInside == curves) { 1842 if (draw_cubic_red ? curve.length == 8 : firstInside == curves) {
1828 ctx.strokeStyle = "rgba(255,0,0, 1)"; 1843 ctx.strokeStyle = "rgba(255,0,0, 1)";
1829 ctx.fillStyle = "rgba(255,0,0, 1)"; 1844 ctx.fillStyle = "rgba(255,0,0, 1)";
1830 } else { 1845 } else {
1831 ctx.strokeStyle = "rgba(0,0,255, 1)"; 1846 ctx.strokeStyle = "rgba(0,0,255, 1)";
1832 ctx.fillStyle = "rgba(0,0,255, 1)"; 1847 ctx.fillStyle = "rgba(0,0,255, 1)";
1833 } 1848 }
1834 ctx.stroke(); 1849 ctx.stroke();
1835 ctx.font = "normal 16px Arial"; 1850 ctx.font = "normal 16px Arial";
1836 ctx.textAlign = "center"; 1851 ctx.textAlign = "center";
1837 ctx.fillText(parseInt(curves) + 1, _px, _py + 5); 1852 ctx.fillText(parseInt(curves) + 1, _px, _py + 5);
(...skipping 95 matching lines...) Expand 10 before | Expand all | Expand 10 after
1933 scale /= 2; 1948 scale /= 2;
1934 calcLeftTop(); 1949 calcLeftTop();
1935 redraw(); 1950 redraw();
1936 break; 1951 break;
1937 case '=': 1952 case '=':
1938 case '+': 1953 case '+':
1939 scale *= 2; 1954 scale *= 2;
1940 calcLeftTop(); 1955 calcLeftTop();
1941 redraw(); 1956 redraw();
1942 break; 1957 break;
1958 case 'b':
1959 draw_cubic_red ^= true;
1960 redraw();
1961 break;
1943 case 'c': 1962 case 'c':
1944 drawTop(); 1963 drawTop();
1945 break; 1964 break;
1946 case 'd': 1965 case 'd':
1947 var test = tests[testIndex]; 1966 var test = tests[testIndex];
1948 var testClone = []; 1967 var testClone = [];
1949 for (var curves in test) { 1968 for (var curves in test) {
1950 var c = test[curves]; 1969 var c = test[curves];
1951 var cClone = []; 1970 var cClone = [];
1952 for (var index = 0; index < c.length; ++index) { 1971 for (var index = 0; index < c.length; ++index) {
(...skipping 246 matching lines...) Expand 10 before | Expand all | Expand 10 after
2199 <body onLoad="start();"> 2218 <body onLoad="start();">
2200 2219
2201 <canvas id="canvas" width="750" height="500" 2220 <canvas id="canvas" width="750" height="500"
2202 onmousedown="mouseDown = true" 2221 onmousedown="mouseDown = true"
2203 onmouseup="mouseDown = false" 2222 onmouseup="mouseDown = false"
2204 onmousemove="handleMouseOver()" 2223 onmousemove="handleMouseOver()"
2205 onclick="handleMouseClick()" 2224 onclick="handleMouseClick()"
2206 ></canvas > 2225 ></canvas >
2207 </body> 2226 </body>
2208 </html> 2227 </html>
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698