PDA

View Full Version : Image and SVG overlay within Panel items



rmills@saba.com
13 Dec 2012, 12:47 PM
I have a panel with a table type layout. One of the table items is an image. I would like to use SVG to draw on top of the image (based on mouse events). If I were not using ExtJs I would create a div with position style of relative with two children with position style absolute at 0,0. One child would be the image and the other would be my SVG element. Any suggestions on how do to this within the ExtJS panel?

(I've got this currently implemented by creating my SVG as a child of document.body, position style absolute, same position as my image, but this has problems with scrolling, large images, and IE)

rmills@saba.com
14 Dec 2012, 5:13 AM
I added autoEl to my image component:

...
id: 'qst_image',
autoEl: 'div',
xtype: 'image',
...

I set the style of the image parent to "relative" and the parent of my SVG element to the image parent:

...
var imElem = Ext.getCmp('qst_image');
var box = imElem.getBox();
var w = box.width;
var h = box.height;
g_SVG = document.createElementNS(g_svgNS, "svg");
g_SVG.setAttribute("version", "1.1");
g_SVG.setAttribute("style", "width:" + w + "px; height:" + h +
"px; position:absolute; top:0; left:0; z-index:10;");
var qstImageParent = document.getElementById('qst_image').parentNode;
qstImageParent.style.position = "relative";
qstImageParent.appendChild(g_SVG);
...

rmills@saba.com
14 Dec 2012, 7:24 AM
I made a couple corrections to this. Note that the containing DIV gets the 'qst_image' id. The image gets the id 'qst_image-img'.

...
var qstImageImg = document.getElementById('qst_image-img');
w = qstImageImg.offsetWidth;
h = qstImageImg.offsetHeight;
g_SVG = document.createElementNS(g_svgNS, "svg");
g_SVG.setAttribute("version", "1.1");
g_SVG.setAttribute("style", "width:" + w + "px; height:" + h +
"px; position:absolute; top:0; left:0; z-index:10;");
var qstImageDiv = document.getElementById('qst_image');
qstImageDiv.style.position = "relative";
qstImageDiv.appendChild(g_SVG);
...