|
History
| Log In
|
|
|
|
[
Permlink
| « Hide
]
Josh Crowley - 12/Jun/07 02:42 AM
Er, I should also mention that in SWF, width and height aren't necessarily needed for drawviews. However, if not supplied in DHTML, it'll default to some arbitrary size, resulting in a kind of "clipping".
Constraints are not working, because of
From the working draft of WHATWG on HTML-<canvas>: "The width attribute defaults to 300, and the height attribute defaults to 150." This is the "arbitrary" size on the <drawview>. Author: max
Date: 2007-06-14 15:26:59 -0700 (Thu, 14 Jun 2007) New Revision: 5422 Modified: openlaszlo/branches/legals/lps/components/extensions/drawview.lzx Log: Change 20070612-maxcarlson-Q by maxcarlson@plastik on 2007-06-12 19:27:38 PDT in /Users/maxcarlson/openlaszlo/legals-clean for http://svn.openlaszlo.org/openlaszlo/branches/legals Summary: Fix drawview to wait for correct initial width/height in dhtml New Features: Bugs Fixed: Technical Reviewer: promanik QA Reviewer: jcrowley Doc Reviewer: (pending) Documentation: Release Notes: Details: drawview.lzx - Add lineCap attribute. Delay until after onconstruct event in IE. Add _buildcanvas(), which is called with a width and height to create the canvas. setWidth() and setHeight() call _buildcanvas() when both values have been set. clear() clears the entire canvas size, regardless of the current width. Show/hide context visibility directly rather than calling setVisible(), and do this for swf only. Reduce the number of curves drawn for small circles. Tests: Testcase from Modified: openlaszlo/branches/legals/lps/components/extensions/drawview.lzx =================================================================== --- openlaszlo/branches/legals/lps/components/extensions/drawview.lzx 2007-06-14 22:02:42 UTC (rev 5421) +++ openlaszlo/branches/legals/lps/components/extensions/drawview.lzx 2007-06-14 22:26:59 UTC (rev 5422) @@ -92,6 +92,12 @@ @access public --> <attribute name="lineWidth" value= "1" type="number"/> + + <!--- Gives the default lineCap value for lines. Round for consistency between swf and dhtml. + @type string + @access public + --> + <attribute name="lineCap" value="round" type="string"/> <!--- Represents the colour to use for the lines around shapes. Specified as a hexadecimal number (0xffffff) or a CSS string ('#ff00ff' or '#f0f'). @access public @@ -102,6 +108,7 @@ @access public --> <attribute name="fillStyle" value= "#000000" type="string"/> + <!--- Contains a reference to the raw drawview context. oncontext is sent when the context is ready to use, which can take some time in IE. @access public @@ -254,6 +261,7 @@ var globalAlpha = 1; var lineWidth = 1; + var lineCap = 'round'; var strokeStyle = '#000000'; var fillStyle = '#000000'; var context = null; @@ -263,20 +271,33 @@ function construct(parent,args) { super.construct(parent, args); - - new LzDelegate( this , "_onconstruct" , this , "onconstruct" ); + if (Lz.__BrowserDetect.isIE) { + new LzDelegate( this , "_onconstruct" , this , "onconstruct" ); + } else { + this._onconstruct(args); + } } + function _onconstruct(args) { + var w = args ? args['width'] : this.width; + var h = args ? args['height'] : this.height; + if (this['__id'] == null && w > 0 && h > 0) { + this._buildcanvas(w, h); + } + } - function _onconstruct() { + function _buildcanvas(width, height) { if (drawview.prototype.uid == null) { drawview.prototype.uid = 0; } this.__id = 'canvas-' + drawview.prototype.uid++; + //Debug.write('_buildcanvas', this.__id, width, height); this.__LZcanvas = document.createElement('canvas'); this.__LZcanvas.setAttribute('id', this.__id); - this.__LZcanvas.setAttribute('width', this.width); - this.__LZcanvas.setAttribute('height', this.height); + this.__LZcanvas.setAttribute('width', width); + this.__LZcanvas.setAttribute('height', height); + this.__canvaswidth = width; + this.__canvasheight = height; var div = this.getMCRef(); div.appendChild(this.__LZcanvas); this.beginPath(); @@ -289,7 +310,19 @@ this.setAttribute('context', this.__LZcanvas.getContext("2d")); } } - + function setWidth(w) { + super.setWidth(w); + if (this['__id'] == null && this.height > 0) { + this._buildcanvas(w, this.height); + } + } + function setHeight(h) { + super.setHeight(h); + if (this['__id'] == null && this.width > 0) { + this._buildcanvas(this.width, h); + } + } + function __initie() { try { if (this.__LZcanvas && this.__LZcanvas.parentNode != null) { @@ -373,8 +406,8 @@ function __playPath() { if ($debug) this.__checkContext(); - this.setVisible(false); this.context.lineWidth = this.lineWidth; + this.context.lineCap = this.lineCap; if (typeof this.fillStyle == 'object' && this.fillStyle instanceof LzCanvasGradient) { //Debug.write('before apply'); this.fillStyle.__applyTo(this.context); @@ -395,7 +428,6 @@ } this.direct = false; } - this.setVisible(true); } function clip() { @@ -411,7 +443,7 @@ function clear() { if ($debug) this.__checkContext(); - this.context.clearRect(0, 0, this.width, this.height); + this.context.clearRect(0, 0, this.__canvaswidth, this.__canvasheight); } function clearMask() { @@ -494,6 +526,7 @@ function _oninit() { this.oncontext.sendEvent(); } + function beginPath() { //Debug.write('beginPath'); @@ -669,7 +702,7 @@ } function __playPath(m) { - this.setVisible(false); + this.context._visible = false; var p = this.__path; //Debug.write(p, m); for (var i = 0; i < p.length; i++) { @@ -686,7 +719,7 @@ m.curveTo(op[1], op[2], op[3], op[4]); } } - this.setVisible(true); + this.context._visible = true; } function clip () { @@ -910,16 +943,17 @@ if (yRadius == undefined) { yRadius = radius; } - // covert 45 degrees to radians for our calculations - theta = Math.PI/4; + var s = (radius < 20 && yRadius < 20) ? 5 : 8; + // covert to radians for our calculations + theta = Math.PI/ (s / 2); // calculate the distance for the control point xrCtrl = radius/Math.cos(theta/2); yrCtrl = yRadius/Math.cos(theta/2); // start on the right side of the circle angle = 0; this.moveTo(x+radius, y); - // this loop draws the circle in 8 segments - for (var i = 0; i<8; i++) { + // this loop draws the circle in n segments + for (var i = 0; i<s; i++) { // increment our angles angle += theta; angleMid = angle-(theta/2); _______________________________________________ Laszlo-checkins mailing list Laszlo-checkins@openlaszlo.org http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins (4.0 branch (4.0.3) local build r 5544)
Lines same length in swf and dhtml. Actually, I discovered a new issue with this one: Now, drawview width and height cannot NOT be constrained. The following example demonstrates this:
<canvas width="300" height="100"> <view width="100" height="100" x="5" y="5"> <drawview name="dv1" width="${parent.width}" height="${parent.height}"> <handler name="oncontext"> Debug.write('constrained'); this.strokeStyle = '#FF0000'; this.fillStyle = '#00FFFF'; this.beginPath(); this.moveTo(0,0); this.lineTo(this.width, 0); this.lineTo(this.width, this.height); this.lineTo(0, this.height); this.closePath(); this.fill(); this.stroke(); </handler> </drawview> </view> <drawview name="dv2" width="100" height="100" x="110" y="5"> <handler name="oncontext"> Debug.write('explicit'); this.fillStyle = '#00FF00'; this.strokeStyle = '#0000FF'; this.beginPath(); this.moveTo(0,0); this.lineTo(this.width, 0); this.lineTo(this.width, this.height); this.lineTo(0, this.height); this.closePath(); this.fill(); this.stroke(); </handler> </drawview> </canvas> The first drawview receives an oncontext event. The second one doesn't. For some reason, setting width and height to static numerical values ends up preventing the drawview's context. Thus, the drawing that's supposed to take place when the drawview receives its context never takes place, and nothing is drawn. This happens in DHTML only. I'm going to reassign this back to Max. Sorry, Max -- I was the reviewer on this one. I should've tested this more thoroughly. I didn't think to try it with numerical values (or no size at all) until just now. Every other drawview I'd been using until this point had been constrained to its parent or some other object's width and height.
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 |
|
Bug
Resolved
--
Drawview's width and height cannot be constrained in DHTML.