We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Imagenode as hexagon

Thread ID:

Created:

Updated:

Platform:

Replies:

129614 Mar 24,2017 11:43 AM UTC Mar 29,2017 06:36 AM UTC ASP.NET MVC 3
loading
Tags: Diagram
indrani Gajjarapu
Asked On March 24, 2017 11:43 AM UTC

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 [Syncfusion]
Replied On March 27, 2017 12:49 PM UTC

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" }, 
            ], 
             
        }); 


Regards, 
Shyam G 


indrani Gajjarapu
Replied On March 28, 2017 01:29 PM UTC

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 [Syncfusion]
Replied On March 29, 2017 06:36 AM UTC

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? 


Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;