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

A Bezier Line Tool - Possible?

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

11 Replies

KR Kameshwaran R Syncfusion Team February 5, 2015 10:24 AM UTC

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.




JJ Jim Jacobs February 6, 2015 08:05 PM UTC

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


SG Shyam G Syncfusion Team February 9, 2015 01:23 PM UTC

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




JJ Jim Jacobs February 9, 2015 11:50 PM UTC

Hi,

Yep, the name property solved my issue.

Thanks

Jim


SG Shyam G Syncfusion Team February 10, 2015 04:25 AM UTC

Hi Jim

Thanks for the update

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

Regards,

Shyam G




JJ Jim Jacobs February 12, 2015 01:21 AM UTC

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


SG Shyam G Syncfusion Team February 12, 2015 01:06 PM UTC

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




JJ Jim Jacobs February 12, 2015 02:06 PM UTC

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


SG Shyam G Syncfusion Team February 13, 2015 11:53 AM UTC

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




JJ Jim Jacobs February 13, 2015 03:26 PM UTC

Hi Shyam,

That works.
Thanks

Jim


SG Shyam G Syncfusion Team February 16, 2015 10:44 AM UTC

Hi Jim

Thanks for the update.

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

Regards,

Shyam G



Loader.
Up arrow icon