Hello,
Has anyone ever encountered the following problem with GFX on IE7?
When I draw a regular vector shape (say, a line) in one part of the canvas and an image in another part of the canvas, then line becomes inaccessible to mouse events.
Example code:
var container = dojo.byId("canvas");
var dojoSurface = dojox.gfx.createSurface(container, 800, 400);
var dojoLine = dojoSurface.createLine({x1: 10, y1: 10, x2: 30, y2: 30}).setStroke({width: 5, color: "#0000ff"});
dojoLine.connect("onmousedown",function(){console.debug("line clicked");});
var dojoImage = dojoSurface.createImage({
x: 100,
y: 100,
width: 46,
height: 46,
src: "Command.png"});
dojoImage.connect("onmousedown",function(){console.debug("image clicked");});
I noticed that each image gets placed in a div-tag that's the size of the whole canvas. When such a div-tag gets placed on canvas, all shapes stacked below it (except other images) become inaccessible to mouse events.
Does anyone have any idea how this could be tackled without explicitly redrawing all regular vector shapes each time a new image is created/recreated on the canvas?
Thanks in advance!
Could you stack it below
Could you stack it below other shapes? Either use a group for that, or moveToBack() method of a shape.
Thanks for responding. What
Thanks for responding. What you are suggesting is exactly what we have resorted to doing. It's just that our initial design required having some images being on top of vector shapes - for mouse rollover effects, etc. However, this limitation is not necessarily a show-stopper for our project.
Having said this, do you think that this limitation is something that can be addressed moving forward? It would be nice not to have to worry about z-order of images relative to everything else each time you draw something or do an image swap. Moreover, do you suggest overriding or creating a custom moveToBack() function that regular shapes could use, so that they are not stacked below images? If yes, could you please point me to the place in the code where it would be best to do that?
Thanks again!
The technical reason for
The technical reason for doing the image the way it was done is the deficiency of the VML image shape. Unlike other shapes it ignores the transformation, and can be scaled in either direction, but not skewed, nor rotated. Probably the smarter implementation of this shape can switch between two depending on a transformation matrix, but it'll increase the size of the VML renderer, which is big enough even now due to other numerous problems with VML.
The way to change the behavior of z-index methods, is to override VML-specific methods shape.moveToFront() and shape.moveToBack(), or provide your own functions to do so. For example, you can call the original method, take "children" (an array property of all containers), select all image shapes back-to-front, and issue them moveToBack() if they are not at the end of the array. Take a look at dojox.gfx.shape.Container._moveChildToFront() and _moveChildToBack() to see how "children" property is used, and dojox.gfx.shape.moveToFront(), dojox.gfx.shape.moveToBack() for how these container's methods are used.
Thanks for your response and
Thanks for your response and pointers. Your input is much appreciated!
To follow up, I have gone
To follow up, I have gone ahead and reworked a bunch of stuff in our design to try to keep images behind vector shapes. However, in some cases we absolutely have to have a shape partly "behind" an image in z-order and still be event accessible. For example, a small image may need to lie above a line that crosses the screen. Where the image is above the line, the line is not visible. However it is visible everywhere else. This line should be event accessible, so that is could be deleted/moved. With current GFX VML implementation, this does not seem to be possible. Do you have any suggestions on how this limitation could be circumvented?
Thanks in advance!
The only way I see is to
The only way I see is to rewrite VML's image shape. One possible (half-)solution is to use native VML image for unrotated/unskewed images, and revert to the existing HTML image for anything else. It doesn't solve everything, and increases the complexity of the renderer reducing the perfromance and increasing the download size. Other than that I can suggest to try other renderers (e.g., Silverlight) or petition Microsoft for fixing VML or introducing something else (SVG).
I think switching to native
I think switching to native VML image shape would actually work for us, as we don't use rotation/skewing or even scaling of images. All we do is drag-and-drop, which works nicely using dojox.gfx.Moveable class. Would you have any pointers on how to do this swap? Alternatively, considering that all of our team is tied up building up feature sets, is there a way we could have someone on the GFX team implement this for us (possibly for a fee)? If that's a possibility then I would definitely enquirer with my management tomorrow about budgeting for this.
Please let me know. Thanks again!
I have another question. I
I have another question. I just tried circumventing the IE image z-index limitation by using images as pattern fills of vector shapes. Here is a code snippet I tried on IE:
var testLine = surface.createLine(
{
x1: 0,
y1: 0,
x2: 100,
y2: 100
}).setStroke(
{
color: "black",
width: 10
});
testLine.connect("onmousedown", null, function(){console.log("line mousedown")});
var testRect = surface.createRect(
{
x: 0,
y: 0,
width: 48,
height: 48
})
.setFill(
{
type: "pattern",
x: 0,
y: 0,
width: 48,
height: 48,
src: "Image.png"
});
testRect.connect("onmousedown", null, function(){console.log("image rectangle mousedown")});
That works fine when the rectangle is created at location 0,0. However, when I try to move the rectangle to another location (say 10,10), the pattern does not move with the image, but stays anchored at 0,0, which creates strange tiling effects. I tried to play around with pattern fill parameters, but wasn't successful. The same results happen when you make the rectangle movable by using the dojox.gfx.Moveable class. Is there a way to move the pattern start point together with the rectangle?
Thanks!
Just to follow up, the
Just to follow up, the pattern implementation works as expected on Opera (SVG). If we could get it to work on IE, I think this would be the way to go for our app! Please let me know if there is a way to make patterns behave as background-images under CSS on IE and have vector shapes with such backgrounds be movable. Thanks!
Alternatively, my management has already let me know that they will consider paying a fee for switching the image shape implementation under VML to a native VML image shape. If someone on the GFX team could let me know whether that's something that their team (or anyone else they know is capable) would consider doing, I would really appreciate it.
Thanks!
Start with SitePen
One of the first places to stop in the Dojo world is SitePen (http://sitepen.com), which I work for. This company specializes in Dojo-based solutions and has a staff capable to deliver.
Most probably it is one of
Most probably it is one of the differences between SVG and VML. Off the top of my head I don't recall if it is fixable or not. Please file a bug ticket for that — it needs to be investigated.