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.

Draw a polygon on the fly

Thread ID:

Created:

Updated:

Platform:

Replies:

121594 Jan 5,2016 04:31 PM Feb 19,2016 02:27 AM JavaScript 4
loading
Tags: ejDiagram
Tezcan Cirakoglu
Asked On January 5, 2016 04:31 PM

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

Shyam G [Syncfusion]
Replied On January 5, 2016 11:23 PM

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


Shyam G [Syncfusion]
Replied On January 6, 2016 12:56 AM

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


Tezcan Cirakoglu
Replied On February 18, 2016 07:53 AM

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

Shyam G [Syncfusion]
Replied On February 19, 2016 02:27 AM

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


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.

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.

;