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. Image for the cookie policy date

Draw a polygon on the fly

Hi there,

Is it possible to draw a polygon with mouse as end user can draw a rectangle with the below code? We need the enduser to create a polygon with mouse at runtime. Like we do in winforms version...

var rectObject = {
   type: ej.datavisualization.Diagram.Shapes.Basic,
   shape: "rectangle",
   fillColor: "#fcbc7c",
   borderColor: "#f89b4c",
   labels: [{
       "text": "Kitchen Area"
   }]
};

function drawRectangle()
{
   var diagram = $("#diagram").ejDiagram("instance");
   //JSON to create a rectangle
   diagram.model.drawType = rectObject;

   //To draw an object once, activate draw once
   diagram.update({
       tool: ej.datavisualization.Diagram.Tool.DrawOnce,
   });
}

4 Replies

SG Shyam G Syncfusion Team January 6, 2016 04:23 AM UTC

Hi Tezcan,

We have created a simple sample to achieve your requirement. please refer to the code example and JSPlayground link.

Code example:

    function drawPolygon() {

            var diagram = $("#diagram").ejDiagram("instance");

            //JSON to create a polygon

            diagram.model.drawType = { type: "basic", shape: "polygon", points: [{ x: 13.560, y: 67.524 }, { x: 21.941, y: 41.731 }, { x: 0.000, y: 25.790 }, { x: 27.120, y: 25.790 }, { x: 35.501, y: 0.000 }, { x: 43.882, y: 25.790 }, { x: 71.000, y: 25.790 }, { x: 49.061, y: 41.731 }, { x: 57.441, y: 67.524 }, { x: 35.501, y: 51.583 }, { x: 13.560, y: 67.524 }] };


            //To draw an object once, activate draw once

            diagram.update({

                tool: ej.datavisualization.Diagram.Tool.DrawOnce,

            });
        }

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

Please refer to the below online sample link and UG documentation link for more details.

Online sample link:http://js.syncfusion.com/demos/web/#!/azure/diagram/drawingtools

UG documentation link:http://help.syncfusion.com/js/diagram/tools

Regards,
Shyam G



SG Shyam G Syncfusion Team January 6, 2016 05:56 AM UTC

Hi Tezcan,


Please ignore our previous update.


We considered this “Need to provide support to draw polygon points dynamically using polygon tool” as an feature request and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.


https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents


Regards,

Shyam G



TC Tezcan Cirakoglu replied to Shyam G February 18, 2016 12:53 PM UTC

Hi Tezcan,


Please ignore our previous update.


We considered this “Need to provide support to draw polygon points dynamically using polygon tool” as an feature request and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.


https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents


Regards,

Shyam G


Hi,

the ability mentioned below is supplied with service pack release but i could not find any sample code for this on your site. Could you please provide sample code for  “Need to provide support to draw polygon points dynamically using polygon tool” 

Thanks for further help


SG Shyam G Syncfusion Team February 19, 2016 07:27 AM UTC

Hi Tezcan,

You have confirmed that you have got the samples through direct - trac support in forum 122127. Please let us know if you need any other assistance

Regards,
Shyam G


Loader.
Live Chat Icon For mobile
Up arrow icon