Opened 14 years ago
Closed 14 years ago
#3860 closed defect (fixed)
dojox.gfx.matrix.scaleAt issue in IE
Reported by: | guest | Owned by: | Eugene Lazutkin |
---|---|---|---|
Priority: | high | Milestone: | 1.0 |
Component: | DojoX GFX | Version: | 0.9 |
Keywords: | Cc: | [email protected]… | |
Blocked By: | Blocking: |
Description
So this issue is a little difficult to explain, so I will try to explain through reproducible steps. The code below is the test page.
In this code:
- I create a surface and add a root group node.
- A Rect is added to the root.
- Clicking 'Scale' applies a dojox.gfx.matrix.scaleAt(2, { x:150, y:150 });
- Clicking 'Position' displays left,top,width,height of root.rawNode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>dojox.gfx.matrix.scaleAt</title> <script type="text/javascript" src="../../../js/dojo-0.9.0beta/dojo/dojo.js.uncompressed.js"></script> <script type="text/javascript"> dojo.require("dojox.gfx"); var surface, root, rect; function init() { surface = dojox.gfx.createSurface(dojo.byId("div"), 300, 300); root = surface.createGroup(); rect = root.createRect({ x:100, y:100, width:100, height:100 }); rect.setFill([255, 0, 0]); } function scale() { root.applyTransform(dojox.gfx.matrix.scaleAt(2, { x:150, y:150 })); } function position() { if (dojo.isIE) { var style = root.rawNode.currentStyle; alert(style.left + ", " + style.top + ", " + style.width + ", " + style.height); } else { alert(dojo.toJson(root.getTransform())); } } dojo.addOnLoad(init); </script> </head> <body> <input type="button" value="Scale" onclick="scale()" /> <input type="button" value="Position" onclick="position()" /> <div id="div" style="width:300px; height:300px; border:1px solid #000; overflow:hidden;"></div> </body> </html>
Steps:
- Copy/paste the code above to an html file & open in IE 6/7
- Click Position to view the position of the root's rawNode. Alerts (101px,101px,75pt,75pt)
- Click Scale & Position again. Alerts (51px,51px,150pt,150pt)
- Click Scale again. First you will notice that the box overflows outside the surface (thats already a ticket #3657). But now clicking Position alerts (0px,0px,300pt,300pt).
Henceforth, clicking Scale & then position will change the width & height, but not the left & top, it is always 0px,0px.
There are 2 issues here:
- The style left/top should be negative.
- The width & height should probably be applied in pixels & not points.
Additionally, if I add 'position:relative;' to the div's style, the overflow problem is resolved, but the position persists.
Attachments (2)
Change History (6)
comment:1 Changed 14 years ago by
Status: | new → assigned |
---|
comment:2 Changed 14 years ago by
Milestone: | → 0.9 |
---|
comment:3 Changed 14 years ago by
Milestone: | 0.9 → 1.0 |
---|
Pushing to 1.0... not sure what we can do (yet) to fix this to work with VML.
Changed 14 years ago by
Attachment: | dojox_gfx_scaleAt_mod.html added |
---|
modified test file to accomodate the latest changes
comment:4 Changed 14 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
I modified the test file to accommodate the latest changes. It is a minor edit. Now it behaves as expected.
Notes:
- remove DOCTYPE --- VML misbehaves with [X]HTML documents. Actually VML predates XHTML, and was never designed to work with it. :-(
- accessing nodes directly using rawNode is bad --- VML reports some bogus values, while the picture is correct. And it will not work with Silverlight and some other upcoming renderers.
VML does have some weird overflow problems. I am going to investigate it during my dojox.gfx marathon. Some random notes: