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.

A Bezier Line Tool - Possible?

Thread ID:

Created:

Updated:

Platform:

Replies:

118147 Feb 4,2015 05:43 PM Feb 16,2015 05:44 AM ASP.NET Web Forms 11
loading
Tags: Diagram
Jim Jacobs
Asked On February 4, 2015 05:43 PM

Hi,

I'm using the orthogonal and straight line tools.
I'd like to add a bezier tool to my toolbar in addition to these two.

Is this possible?

Any suggestions on how this would be accomplished?

Thanks in advance.

Jim

Kameshwaran R [Syncfusion]
Replied On February 5, 2015 05:24 AM

Hi Jim,

Thanks for your interest in Syncfusion product

Currently we don’t have support for your requirement “add a bezier tool to my toolbar”. Please create an incident on behalf of this reported support from the following link for better assistance.

Here is the link: link

Please let me know if you have any queries.

Regards,

Kameshwaran R.



Jim Jacobs
Replied On February 6, 2015 03:05 PM

Hi,

I decided to programmatically create a bezier connector based on the user clicking a toolbar button.
I used the sample from your online documentation.

Here's the function:

function CreateBezierConnector() {
    //Adding Bezier through vectors
    var segments = [{
        type: "bezier",
        //Length and angle between source point and control point 1
        vector1: { angle: 180, distance: 120 },
        //Length and angle between target point and control point 2
        vector2: { angle: 10, distance: 140 }
    }];
    var connectors = [{
        segments: segments,
        sourcePoint: { x: 310, y: 180 },
        targetPoint: { x: 190, y: 40 }
    }];
    $("#DiagramContent").ejDiagram({
        connectors: connectors
    });
}

The connector renders on the screen, but as soon as I try to do anything with it, I encounter errors.
See the attached video.

This is my first attempt at doing this type of thing, so I suspect I'm doing something wrong.

Please help.

Thanks

Jim

Attachment: Syncfusion__bezier_errors__06Fev2015_624caeed.zip

Shyam G [Syncfusion]
Replied On February 9, 2015 08:23 AM

Hi Jim

Thanks for using Syncfusion products.

 We suggest you to set an “name” for an connector to resolve your reported issue. Please refer the sample and code snippet below.

Code snippet:

function bezierconnector() {            

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

            var segments = [{

                type: "bezier",

                //Length and angle between source point and control point 1

                vector1: { angle: 180, distance: 120 },

                //Length and angle between target point and control point 2

                vector2: { angle: 10, distance: 140 }

            }];

            var connectors = [{

                name:"bezier",

                segments: segments,

                sourcePoint: { x: 310, y: 180 },

                targetPoint: { x: 190, y: 40 }

            }];

            //add the connectors

            diagram.add(connectors);

        }

Sample:http://www.syncfusion.com/downloads/support/directtrac/118147/WebApplication2-783540094.zip

Please let me know if any concerns.

Regards,

Shyam G



Jim Jacobs
Replied On February 9, 2015 06:50 PM

Hi,

Yep, the name property solved my issue.

Thanks

Jim

Shyam G [Syncfusion]
Replied On February 9, 2015 11:25 PM

Hi Jim

Thanks for the update

Please let me know if you require further assistance on this.

Regards,

Shyam G



Jim Jacobs
Replied On February 11, 2015 08:21 PM

Hi Shyam,

Looks like it was premature of me to say if was working.
Although the code will drop a bezier connector on the canvas if there are no connectors present, if there's already a connector there, it changes it to a bezier.

See the attached video.

Here's my code behind the toolbar button:

function CreateBezierConnector() {
    //Adding Bezier through vectors
    var segments = [{
        type: "bezier",
        //Length and angle between source point and control point 1
        vector1: { angle: 180, distance: 120 },
        //Length and angle between target point and control point 2
        vector2: { angle: 10, distance: 140 }
    }];
    var connectors = [{
        name: "bezier",
        segments: segments,
        sourcePoint: { x: 310, y: 180 },
        targetPoint: { x: 190, y: 40 }
    }];
    $("#DiagramContent").ejDiagram({
        connectors: connectors
    });
}

Any thoughts?

My thanks in advance.

Jim

Attachment: Syncfusion__Bexier_Issue__11Feb2015_561f409c.zip

Shyam G [Syncfusion]
Replied On February 12, 2015 08:06 AM

Hi Jim

Thanks for the update.

We suggest you to use the “add” API in order to resolve your reported issue. Please refer the sample and code snippet below for your reference.

Code snippet:

function bezierconnector() {            

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

            var segments = [{

                type: "bezier",

                //Length and angle between source point and control point 1

                vector1: { angle: 180, distance: 120 },

                //Length and angle between target point and control point 2

                vector2: { angle: 10, distance: 140 }

            }];

            var connectors = [{

                name: "bezier",

                segments: segments,

                sourcePoint: { x: 310, y: 180 },

                targetPoint: { x: 190, y: 40 },

 

            }];

            //add the connectors

            diagram.add(connectors);

           

        }

Sample: http://www.syncfusion.com/downloads/support/directtrac/118147/WebApplication2_(2)-1173037088.zip

Please let me know if any concerns.

Regards,

Shyam G



Jim Jacobs
Replied On February 12, 2015 09:06 AM

Hi Shyam,

I tried the 'add' APU but the with the same result.
See the attached video.

It seems that dropping a bezier connector from the palette works fine.

Any suggestions as to what to try next?

Thanks

Jim

Attachment: Syncfusion__Bexier_Issue__12Feb2015_3601c6fa.zip

Shyam G [Syncfusion]
Replied On February 13, 2015 06:53 AM

Hi Jim

Thanks for the update.

Please note that the reported issue occurs due to the rendering of connectors with the same name. So, we suggest you to render the connector with the different name in order to resolve your reported issue. Please refer the code snippet below.

Code snippet:

function bezierconnector() {

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

            var segments = [{

                type: "bezier",

                //Length and angle between source point and control point 1

                vector1: { angle: 180, distance: 120 },

                //Length and angle between target point and control point 2

                vector2: { angle: 10, distance: 140 }

            }];

            var connectors = [{

                name: "bezier" + ej.datavisualization.Diagram.Util.randomId(),

                segments: segments,

                sourcePoint: { x: 310, y: 180 },

                targetPoint: { x: 190, y: 40 },               

            }];

            //add the connectors

            diagram.add(connectors);

        }

Please let me know if any concerns.

Regards,

Shyam G



Jim Jacobs
Replied On February 13, 2015 10:26 AM

Hi Shyam,

That works.
Thanks

Jim

Shyam G [Syncfusion]
Replied On February 16, 2015 05:44 AM

Hi Jim

Thanks for the update.

Please let us know if you require further assistance on this.

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.

;