Imagenode as hexagon

[indrani Gajjarapu]

Hi,

 

The following code gives me an image node in the shape of a square. But I want the image to be rendered in the shape of a hexagon.

Can you please give me a workaround.

Thank you.

var photo = { name: "native" + ej.datavisualization.Diagram.Util.randomId(), source: t.Source,  parent: Pathnode.name, offsetX: Pathnode.offsetX + 20, offsetY: Pathnode.offsetY + 15, type: "image", minWidth: 60, width: 60, maxWidth: 60, minHeight: 60, height: 60, maxHeight: 60, scale: "stretch", constraints: DiagramConstraints.Default & ~DiagramConstraints.PointerEvents & ~DiagramConstraints.Resize };

[Shyam G]

Hi Indrani, 

By default, the image node will be rendered in a rectangle shape. If you need an image to be rendered in the hexagon, then please use native node to achieve your requirement. Please refer to the code example and JSPlayground link. 

Code example: 

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="visiblity:hidden"> 

        <defs> 

            <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100"> 

                <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:rel='nofollow' href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-25" width="150" height="100" /> 

            </pattern> 

        </defs> 

    </svg> 

 

    <script id="svgTemplate1" type="text/x-jsrender"> 

        <polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)" /> 

    </script> 

 

  $("#diagram").ejDiagram({ 

             

            nodes: [ 

             { name: "Native", width: 100, height: 100, offsetX: 200, offsetY: 200, fillColor: "#de6ca9", borderColor: "#de6ca9", type: ej.datavisualization.Diagram.Shapes.Native, templateId: "svgTemplate1" }, 

            ], 

             

        }); 

JSPlayground link:http://jsplayground.syncfusion.com/cx2dwt5e 

Regards, 

Shyam G 

[indrani Gajjarapu]

Hi,

I have to create these image nodes dynamically. So, here is my code. 

I get an unknown template JsRender Error.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="visibility:hidden">
    <defs id="patternelement">
    </defs>
</svg>

var TemplateID = RenderImage("PupilImage" + i, t.Source, hexagon.name);
                 
                   if (TemplateID)
                   {
                       var photo = { name: "native" + ej.datavisualization.Diagram.Util.randomId(), source: t.Source, parent: Pathnode.name, offsetX: Pathnode.offsetX + 20, offsetY: Pathnode.offsetY + 15, templateId: TemplateID, type: ej.datavisualization.Diagram.Shapes.Native, minWidth: 60, width: 60, maxWidth: 60, minHeight: 60, height: 60, maxHeight: 60, scale: "stretch", constraints: DiagramConstraints.Default & ~DiagramConstraints.PointerEvents & ~DiagramConstraints.Resize };
                      
                       var detailCircle1 = { name: "detailCircle1" + i, labels: [{ name: "", text: "", bold: true, fontColor: "black", fontSize: 10, italic: false, readOnly: true, width: 50, wrapping: ej.datavisualization.Diagram.TextWrapping.Wrap }], minWidth: 25, width: 25, maxWidth: 25, minHeight: 25, height: 25, maxHeight: 25, type: "node", shape: BasicShapes.Ellipse, offsetX: photo.offsetX - 35, offsetY: photo.offsetY - 17, parent: Pathnode.name, constraints: DiagramConstraints.Default & ~DiagramConstraints.PointerEvents };
                       var detailCircle2 = { name: "detailCircle2" + i, labels: [{ name: "", text: "", bold: true, fontColor: "black", fontSize: 10, italic: false, readOnly: true, width: 50, wrapping: ej.datavisualization.Diagram.TextWrapping.Wrap }], minWidth: 25, width: 25, maxWidth: 25, minHeight: 25, height: 25, maxHeight: 25, type: "node", shape: BasicShapes.Ellipse, offsetX: photo.offsetX - 35, offsetY: photo.offsetY + 17, parent: Pathnode.name, constraints: DiagramConstraints.Default & ~DiagramConstraints.PointerEvents };
                       var detailCircle3 = { name: "detailCircle3" + i, labels: [{ name: "", text: "", bold: true, fontColor: "black", fontSize: 10, italic: false, readOnly: true, width: 50, wrapping: ej.datavisualization.Diagram.TextWrapping.Wrap }], minWidth: 25, width: 25, maxWidth: 25, minHeight: 25, height: 25, maxHeight: 25, type: "node", shape: BasicShapes.Ellipse, offsetX: photo.offsetX + 35, offsetY: photo.offsetY - 17, parent: Pathnode.name, constraints: DiagramConstraints.Default & ~DiagramConstraints.PointerEvents };
                       var detailCircle4 = { name: "detailCircle4" + i, labels: [{ name: "", text: "", bold: true, fontColor: "black", fontSize: 10, italic: false, readOnly: true, width: 50, wrapping: ej.datavisualization.Diagram.TextWrapping.Wrap }], minWidth: 25, width: 25, maxWidth: 25, minHeight: 25, height: 25, maxHeight: 25, type: "node", shape: BasicShapes.Ellipse, offsetX: photo.offsetX + 35, offsetY: photo.offsetY + 17, parent: Pathnode.name, constraints: DiagramConstraints.Default & ~DiagramConstraints.PointerEvents };
                       var detailOct = { name: "detailOct" + i, labels: [{ name: "", text: "", bold: true, fontColor: "black", fontSize: 10, italic: false, readOnly: true, width: 50, wrapping: ej.datavisualization.Diagram.TextWrapping.Wrap }], minWidth: 35, width: 35, maxWidth: 35, minHeight: 25, height: 25, maxHeight: 25, type: "node", shape: BasicShapes.Ellipse, offsetX: photo.offsetX, offsetY: photo.offsetY + 42, parent: Pathnode.name, constraints: DiagramConstraints.Default & ~DiagramConstraints.PointerEvents };
 
                       nodes = [photo, detailCircle1, detailCircle2, detailCircle3, detailCircle4, detailOct];
                       returnChildren(JSON.stringify(nodes), i);
                   } else {
                       alert("Server Error Occured.Please try after some time.");
                   }

function RenderImage(Imgname, Imgsrc, PathName) {
           var NodeConstraints = ej.datavisualization.Diagram.NodeConstraints;
           var xmlns = "http://www.w3.org/2000/svg";
           var dUtils = ej.datavisualization.Diagram.Util;
           var patternid = 'imagepattern' + ej.datavisualization.Diagram.Util.randomId();
 
           var definition = document.getElementById("patternelement");
 
           var pattern = document.createElementNS(xmlns, "pattern");
           dUtils.attr(pattern, { id: patternid, patternUnits:"userSpaceOnUse", width: '100', height: '100' });
           var image = document.createElementNS(xmlns, "image");
           dUtils.attr(image, { id: Imgname + ej.datavisualization.Diagram.Util.randomId(), width: 100, height: 100, constraints: NodeConstraints.Default & ~NodeConstraints.PointerEvents, style: "transform: rotate(-90deg) translate(-100px,0px);" });
           image.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:rel='nofollow' href", Imgsrc)
           pattern.appendChild(image);
           definition.appendChild(pattern);
 
 
           var script = document.createElement('script');
           dUtils.attr(script, { id: PathName, type: 'text/x-jsrender' });
           var polygon = document.createElement('polygon');
           dUtils.attr(polygon, { points: "50 1 95 25 95 75 50 99 5 75 5 25", fill: "url(#" + patternid + ")" });
           
           script.appendChild(polygon);
           document.body.appendChild(script);
           return script.id;
 
 
       }

[Shyam G]

Hi Indrani, 

We suspect that the node name and script template id is same, so only the reported issue occurs. We have applied your code in our sample and it works fine at our end. Could you please check in the below sample and get back to us still if you have any issues at your end? 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/129614indranisample-681416161 

Regards, 

Shyam G