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:


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 Eugene Lazutkin

Milestone: 0.9
Priority: highnormal
Status: newassigned

Could you attach a simple file, which demonstrates the problem? It will speed up the investigation greatly.

comment:2 Changed 12 years ago by guest

hi Eugene,

this is the link: (I've sent a copy to your email also)

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;



<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("*");</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();






<center> <div id="drawboard" class="boardDiv" overflow = 'hidden'></div> </center>

</body> </html>

comment:3 Changed 12 years ago by Eugene Lazutkin

Summary: dojo surface.creatImage problem with IE6Mouse 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 Eugene Lazutkin

Milestone: 0.91.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 Eugene Lazutkin

Resolution: invalid
Status: assignedclosed

No 0.9 test was submitted => the defect is closed.

Note: See TracTickets for help on using tickets.