Opened 12 years ago
Closed 12 years ago
#4079 closed defect (invalid)
Mouse events problems with background image on IE
| Reported by: | guest | Owned by: | Eugene Lazutkin |
|---|---|---|---|
| Priority: | high | Milestone: | 1.0 |
| Component: | DojoX GFX | Version: | 0.4.2rc1 |
| Keywords: | Cc: | ||
| Blocked By: | Blocking: |
Description
I am using Dojo's function:
surface.createImage({width: mainWidth, height: mainHeight, src: myPicUrl});imageR.getEventSource().setAttribute('id', "IMAGEBACK")
On a layer, I try to add a background image, however, when I try to use path to draw on it, I found that this extra background image will mess up the mouse event listener settings.
In particular, when I draw on an image on firefox, using dojo, I press the mouse button (mouse down) to draw, and everything works fine.
On IE 6, however, once I put an image using surface.createImage, the mouse down does not work anymore, and it seems like the program doesn't listen / respond to the mouse down event. Instead, it just draw without mouse down. Once I put the image away (without using the surface.createImage), then the mouse down draw works.
Change History (5)
comment:1 Changed 12 years ago by
| Milestone: | → 0.9 |
|---|---|
| Priority: | high → normal |
| Status: | new → assigned |
comment:2 Changed 12 years ago by
hi Eugene,
this is the link: (I've sent a copy to your email also)
http://www.turbomouth.com:8080/me/js/dojo/draw.html
and the javascript code:
<html> <head>
<style type="text/css">
.boardDiv {
width:360px; height:259px; border: 0px solid #000055;
} .toolDiv {
width:100px; height:259px; background: #f0f9f5; border: 0px solid #000055;
} .showDiv {
width:95px; height:65px; border: 0px solid #000088;
} .paletteDiv {
position:absolute; width: 100px; height: 100px; border: 1px solid #000055; display: none;
} .outDiv {
width: 90px; height: 100px; border: 1px solid #000055; display: none;
}
</style>
<script type="text/javascript">djConfig = { isDebug: false };</script> <script type="text/javascript" src="dojo.js"></script>
<script type="text/javascript">dojo.require("dojo.gfx.*");</script> <script type="text/javascript">dojo.require("dojo.io.*");</script> <script type="text/javascript">dojo.require("dojo.event.*");</script> <script type="text/javascript">dojo.require("dojo.widget.*");</script> <script type="text/javascript">dojo.require("dojo.widget.Button");</script> <script type="text/javascript">dojo.require("dojo.widget.ColorPalette?");</script> <script type="text/javascript">dojo.require("dojo.widget.Slider");</script> <script type="text/javascript">dojo.require("dojo.dom.*");</script>
<script type="text/javascript">
var mainWidth=360; var mainHeight=259; drawboad size var backRect=null; for background var surface = null; for drawing var imageR = null ; for background image
var myPicUrl='cat.jpg'; var myPicUrl=;
var type=1; if can draw var drawing=0; 1 begin draw var x=0; x var y=0; var container_position = null; draw board's position var currentG=null; var gShapes = {} var gShapeCounter = 0; var drawNow=0; var lineColor="#a2dce6"; var lineWidth=3;
function setBackgroundImage(){
if(gShapeCounter>0) {
var xx=document.getElementById(gShapeCounter-1); var na=xx.tagName; var xxP=xx.parentNode; for(var i=(gShapeCounter-1);i>=0;i--) {
var xxC=document.getElementById(i); xxP.removeChild(xxC);
} gShapeCounter=0;
}
imageR=surface.createImage({width: mainWidth, height: mainHeight, src: myPicUrl}); imageR.getEventSource().setAttribute('id', "IMAGEBACK");
var domImage=document.getElementById("IMAGEBACK") container_position = dojo.html.abs(domImage); dojo.event.connect(domImage, 'onmousedown', "handleMouseDown"); dojo.event.connect(domImage, 'onmousemove', "handleMouseMove"); dojo.event.connect(domImage, 'onmouseup', "handleMouseUp");
}
handleMouseDown = function(event){
if(type==1) {
drawing=1; x=event.clientX-container_position.x; y=event.clientY-container_position.y;
}
}
handleMouseMove = function(event) {
if(type==1&&drawing==1) {
if(drawNow==0) {
alert("TestTest?!"); currentG = surface.createPath().moveTo(x,y); currentG.getEventSource().setAttribute('id', gShapeCounter); gShapes[gShapeCounter] = currentG; gShapeCounter=gShapeCounter+1;
} drawNow=1; var line = { x1: x, y1:y, x2:(event.clientX-container_position.x), y2:(event.clientY-container_position.y) }; var nX=event.clientX-container_position.x; var nY=event.clientY-container_position.y; var ref = currentG.lineTo(nX,nY)
.setStroke({color:lineColor, width:lineWidth} );
x=event.clientX-container_position.x; y=event.clientY-container_position.y;
}
}
handleMouseUp = function(event){
drawing=0; drawNow=0; currentG=null;
}
makeShapes = function(){
var domNode=document.getElementById("drawboard") container_position = dojo.html.abs(domNode); dojo.event.connect(domNode, 'onmousedown', "handleMouseDown"); dojo.event.connect(domNode, 'onmousemove', "handleMouseMove"); dojo.event.connect(domNode, 'onmouseup', "handleMouseUp"); surface = dojo.gfx.createSurface("drawboard", mainWidth, mainHeight); var m = dojo.gfx.matrix; var rect = { x: 0, y: 0, width: mainWidth, height: mainHeight }; backRect=surface.createRect(rect);
set image setBackgroundImage();
};
dojo.addOnLoad(makeShapes);
</script>
</head>
<body>
<center> <div id="drawboard" class="boardDiv" overflow = 'hidden'></div> </center>
</body> </html>
comment:3 Changed 12 years ago by
| Summary: | dojo surface.creatImage problem with IE6 → Mouse events problems with background image on IE |
|---|
Thank you. For future references: you can actually attach a file, and I mean an actual file --- see Attachments, Attach File button on this page above. It saves cut-and-pasting for you and me.
comment:4 Changed 12 years ago by
| Milestone: | 0.9 → 1.0 |
|---|
The test uses 0.4 branch. I am delaying it until 1.0 so we can have a chance to see if it works in 0.9.
comment:5 Changed 12 years ago by
| Resolution: | → invalid |
|---|---|
| Status: | assigned → closed |
No 0.9 test was submitted => the defect is closed.
Could you attach a simple file, which demonstrates the problem? It will speed up the investigation greatly.