|
History
| Log In
|
|
|
|
[
Permlink
| « Hide
]
Max Carlson - 15/Mar/06 06:55 PM
Can I assign this to you? I poseted a note to your blog about this bug already... Thanks!
This would solve the "heart-shaped"-issue, but I'm not aware of any negative side-effects.
( Basically, I'm just testing whether the start-point and the first control-point resp. the second control-point and the end-point denote the same point. If this happens, I'll draw a simple "quadraticCurveTo(..)". ) But as reported in forum (see "http://forum.openlaszlo.org/showthread.php?t=9478"), there are still some problems with the "bezierCurveTo(..)"-method in swf. Next version:
SWF-"Heart-shape" does almost look like the DHTML-output. Problem covered in the forum is solved, somehow... Author: max
Date: 2007-06-11 16:42:42 -0700 (Mon, 11 Jun 2007) New Revision: 5378 Modified: openlaszlo/branches/legals/lps/components/extensions/drawview.lzx openlaszlo/branches/legals/lps/components/extensions/test/drawing.lzx Log: Change 20070611-maxcarlson-f by maxcarlson@plastik on 2007-06-11 15:31:29 PDT in /Users/maxcarlson/openlaszlo/legals-clean for http://svn.openlaszlo.org/openlaszlo/branches/legals Summary: Fix swf cubic bezier implementation New Features: Bugs Fixed: Technical Reviewer: promanik QA Reviewer: jcrowley Doc Reviewer: (pending) Documentation: Release Notes: Details: drawview.lzx - Added changes suggested in http://www.openlaszlo.org/jira/browse/LPP-1834 changeset test/drawing.lzx - Added curve class from Tests: http://localhost:8080/legals/lps/components/extensions/test/drawing.lzx?lzr=dhtml and http://localhost:8080/legals/lps/components/extensions/test/drawing.lzx?lzr=swf7 look identical Modified: openlaszlo/branches/legals/lps/components/extensions/drawview.lzx =================================================================== --- openlaszlo/branches/legals/lps/components/extensions/drawview.lzx 2007-06-11 23:36:01 UTC (rev 5377) +++ openlaszlo/branches/legals/lps/components/extensions/drawview.lzx 2007-06-11 23:42:42 UTC (rev 5378) @@ -578,6 +578,43 @@ // the current work item var points = [{x: x0, y: y0}, {x: cp1x, y: cp1y}, {x: cp2x, y: cp2y}, {x: x, y: y}]; while (points) { + // Posit a quadratic. For C1 continuity, control point has to + // be at the intersection of the tangents. + var q1 = this.intersection.apply(null, points); + var q0 = points[0]; + var q2 = points[3]; + + if (!q1 || q1 == -1) { + var flush = true; + var start_first = points[0].x == points[1].x && points[0].y == points[1].y; + var second_end = points[2].x == points[3].x && points[2].y == points[3].y; + if (start_first) { + if (second_end) { + this.lineTo(q2.x, q2.y); + } else { + var q1 = points[2]; + this.quadraticCurveTo(q1.x, q1.y, q2.x, q2.y); + } + } + else if (second_end) { + var q1 = points[1]; + this.quadraticCurveTo(q1.x, q1.y, q2.x, q2.y); + } else { + //both straight lines are collinear + //now we have to test whether they're identical or non-identical + if (!q1) { + q1 = {x:0,y:0};//default-value... + flush = false; + } else { + this.lineTo(q2.x, q2.y); + } + } + if (flush) { + points = work_items.pop(); + continue; + } + } + // Compute the triangle, since the fringe is the subdivision // if we need that and the peak is the midpoint which we need // in any case @@ -590,18 +627,7 @@ y: (c0.y + c1.y)/2}; } } - // Posit a quadratic. For C1 continuity, control point has to - // be at the intersection of the tangents. - var q1 = this.intersection.apply(null, points); - var q0 = points[0]; - var q2 = points[3]; - if (!q1) { - //_root.Debug.write('a line'); - // It's really a line. - this.lineTo(q2.x, q2.y); - points = work_items.pop(); - continue; - } + var qa = this.midpoint(q0, q1); var qb = this.midpoint(q1, q2); var qm = this.midpoint(qa, qb); @@ -623,6 +649,7 @@ work_items.push(right); } } + function fill() { var savedStyle = this.fillStyle; @@ -969,14 +996,20 @@ }); lz.drawview.addProperty('intersection', function (p0, p1, p2, p3) { - // returns null if they're collinear - var u = (p3.x-p2.x)*(p0.y-p2.y) - (p3.y-p2.y)*(p0.x-p2.x); - var d = (p3.y-p2.y)*(p1.x-p0.x) - (p3.x-p2.x)*(p1.y-p0.y); - //_root.Debug.write('intersection', u, d); - if (!d) return null; - u /= d; - return {x: p0.x + (p1.x-p0.x) * u, - y: p0.y + (p1.y-p0.y) * u}; + // returns null if they're collinear and non-identical + // returns -1 if they're collinear and identical + var u = (p3.x-p2.x)*(p0.y-p2.y) - (p3.y-p2.y)*(p0.x-p2.x); + var d = (p3.y-p2.y)*(p1.x-p0.x) - (p3.x-p2.x)*(p1.y-p0.y); + if (!d) { + if (!u) { + return -1;//identical + } else { + return null;//non-identical + } + } + u /= d; + return {x: p0.x + (p1.x-p0.x) * u, + y: p0.y + (p1.y-p0.y) * u}; }); lz.drawview.addProperty('midpoint', function (p0, p1) { Modified: openlaszlo/branches/legals/lps/components/extensions/test/drawing.lzx =================================================================== --- openlaszlo/branches/legals/lps/components/extensions/test/drawing.lzx 2007-06-11 23:36:01 UTC (rev 5377) +++ openlaszlo/branches/legals/lps/components/extensions/test/drawing.lzx 2007-06-11 23:42:42 UTC (rev 5378) @@ -79,6 +79,24 @@ this.fill(); </method> </drawview> + +<!-- from http://forum.openlaszlo.org/showthread.php?t=9478 --> + <class name="curve" extends="drawview"> + <handler name="oncontext"> + drawCurve(0,0, 0,200, 200,0, 200,200); + </handler> + + <method name="drawCurve" args="x1,y1,cx1,cy1,cx2,cy2,x2,y2"> + <![CDATA[ + this.strokeStyle = 0xaaaaaa; + this.beginPath(); + this.moveTo(x1, y1); + this.bezierCurveTo(cx1,cy1,cx2,cy2,x2,y2); + this.stroke(); + ]]> + </method> + </class> + <curve x="100" y="100" width="200" height="200"/> <!-- * X_LZ_COPYRIGHT_BEGIN *************************************************** * Copyright 2001-2007 Laszlo Systems, Inc. All Rights Reserved. * * Use is subject to license terms. * _______________________________________________ Laszlo-checkins mailing list Laszlo-checkins@openlaszlo.org http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins One more comment on testing, from a chat with Josh:
No problem. I'm looking at the other one right now... the gradients still seem different, and the heart has a subtly different shape. 4:35:00 PM etjabberwock: Between SWF and DHTML 4:35:11 PM vjqak: yeah, the gradients have always been different. 4:35:24 PM vjqak: but the heart is much closer! and the curve works out now... 4:35:27 PM etjabberwock: Ah, okay. And the subtle difference in the heart isn't a big deal? 4:35:30 PM etjabberwock: Gotcha. 4:35:50 PM vjqak: No, because we have to approximate to get that kind of curve in swf 4:35:52 PM etjabberwock: Sorry, I wasn't sure how much "identical" was supposed to mean. (4.0 branch (4.0.3) build r5585)
drawview_bezierCurveTo.lzx looks different in swf than dhtml These look the same. http://localhost:8080/legals/lps/components/extensions/test/drawing.lzx?lzr=dhtml http://localhost:8080/legals/lps/components/extensions/test/drawing.lzx?lzr=swf7 I think we oughta restore this to whatever status it was before "reopened".
(trunk 4 local build r7937)
Fixed, gradients still look different. See conversation in bug between Max and Josh. |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 |
|
Bug
Closed
--
cubic bezier implementation in drawview has issues
