1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    11
    Vote Rating
    0
    Answers
    1
    rmills@saba.com is on a distinguished road

      0  

    Default Answered: Image and SVG overlay within Panel items

    Answered: Image and SVG overlay within Panel items


    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)

  2. 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);
    ...

  3. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    11
    Vote Rating
    0
    Answers
    1
    rmills@saba.com is on a distinguished road

      0  

    Default Found solution myself

    Found solution myself


    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);
    ...

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    11
    Vote Rating
    0
    Answers
    1
    rmills@saba.com is on a distinguished road

      0  

    Default Previous code not quite right

    Previous code not quite right


    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);
    ...

Tags for this Thread