Skip to main content
ajaatshatru
ajaatshatru
Inspiring
October 12, 2015
解決済み

What is the direction of the curve points returned by entirePath()? [See description for details]

  • October 12, 2015
  • 返信数 2.
  • 6617 ビュー

The entirePath() of a polygon returned these points. As clarified in a different thread, we have established that the order is leftControlPoint anchorPoint rightControlPoint if there are control points at all. Otherwise it is just the anchor point.

The question I have here is, consider line 3, the control points specified there, do they represent the control points for the Bezier curve between Line 2 point and Line 3 point or a Bezier curve between Line 3 point and Line 4 point?

Thanks!

このトピックへの返信は締め切られました。
解決に役立った回答 Peter Kahrel

This is a nice link https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

The below is pasted from there

Cubic Bezier curves

This example draws a heart using cubic Bézier curves.

function draw() {

  var canvas = document.getElementById('canvas');

  if (canvas.getContext){

    var ctx = canvas.getContext('2d');

    // Quadratric curves example

    var path = new Path2D();

    path.moveTo(75,40);

    path.bezierCurveTo(75,37,70,25,50,25);

    path.bezierCurveTo(20,25,20,62.5,20,62.5);

    path.bezierCurveTo(20,80,40,102,75,120);

    path.bezierCurveTo(110,102,130,80,130,62.5);

    path.bezierCurveTo(130,62.5,130,25,100,25);

    path.bezierCurveTo(85,25,75,37,75,40);

    ctx.fill(path);

  }

}


Nice link, Trevor, thanks.

So in the earlier example, this shape:

ctx.moveTo(20,20);

ctx.bezierCurveTo(20,100,200,100,200,20);

corresponds with the shape you get in InDesign with this script:

g = app.documents[0].pages[0].graphicLines.add ({strokeWeight: 0.5});

g.paths[0].entirePath =

[

[[20, 20], [20, 20], [20, 100]],

[[200, 100], [200, 20], [200, 20]],

];

The curve has two anchors. First anchor at 20,20; no handle, i.e. the incoming handle is on the anchor. The second point has no outgoing handle.

To translate InDesign's path to HTML, do a moveTo to the path's first anchor (myCurve.paths[0].pathPoints[0].anchor).

From there you can work out how to proceed.

P.

返信数 2

Peter Kahrel
Community Expert
Peter KahrelCommunity Expert
Community Expert
October 12, 2015

It's clearer if you present the path as an array of arrays (values rounded here):

[

[519,1135],

[613,1135],

[[647,1169],[750,1234],[757,1238]],

[782,1254],

[1536,2048]

]

The third line indicates that the anchor point is at [750,1234] and that the anchor has two handles. When you select an anchor with the direct selection tool you see any handles. The anchor point in line 3 has two handles: the incoming one ('leftDirection') is [647,1169], the outgoing one ('rightDirection') is [757, 1238]. The values are the coordinates of the handles. When you select a handle, the Transform panel shows the coordinates of the anchor, not the handle. (Only when you press a handle and you keep the mouse button down do you see the handle's coordinates, but very briefly.) But you can see a handle's coordinates in the Info panel, see the screenshot.

The selected anchor is at 186,400, the outgoing ('rightDirection') handle is at 220,400 (couldn't get the mouse pointer exactly on the spot). The path of this curve can be represented in several ways:

[

[[134, 500], [134, 457], [134, 420]],

[[150, 400], [186, 400], [220, 400]],

[[230, 420], [230, 436], [230, 457]],

]

or

[

    [leftDirection = [134, 500],

    anchor = [134, 457],

    rightDirection = [134, 420]

    ],

    [leftDirection = [150, 400],

    anchor = [186, 400],

    rightDirection = [220, 400]

    ],

    [leftDirection = [230, 420],

    anchor = [230, 436],

    rightDirection = [230, 457]

    ],

];

Peter

    ajaatshatru
    ajaatshatru作成者
    Inspiring
    October 12, 2015

    I have one more question. So I understand, the Bezier between two anchor points a and b can be drawn using the leftControl of b and rightControl of a. But according to the screenshot I posted above, it is not possible as there is no other anchor point with controlPoints so how would I draw a Bezier then?

    Trevor:
    Trevor:
    Legend
    October 12, 2015

    The easiest way to draw this stuff in HTML is using EaselJS.


    HI Marc and all,

    I made a script earlier in the year and read at least some that link then, it was a bit difficult to apply in practice in Illustrator or InDesign.

    I needed to as per UI entry draw templates with arches at their ends using bezier curves.  For the simple 1/4 circles rounded corners I used an approximation of something like .55 for the right handle and .45 for the left.

    Below is a snippet of part of the script (it was for Illustrator but the principles are the same for ID)

    const kLeft = r * 0.44771575927734444444, // constant for leftDirection handle for a 90 degree arc
    

          kRight = r * 0.55228508843315972222; // constant for rightDirection handle for a 90 degree arc
    

    var c, l, arcPaths, pathPoints;
    

    

    top = (top == true || top == "top") ? "top" : "bottom";
    

    

    arcPaths = {
    

        top : { // top path starting from top right
    

                anchors: [[x, y], [x - r, y - r]],
    

                rightDirections: [[x, y], [x - r, y - kLeft]],
    

                leftDirections: [[x - kRight, y], [x - r, y - r]],
    

                pointTypes: [PointType.CORNER, PointType.CORNER]
    

            },
    

    

        bottom: { // bottom path starting from top left
    

                anchors: [[x, y], [x + r, y - r]],
    

                rightDirections: [[x, y], [x + kLeft, y - r]],
    

                leftDirections: [[x, y - kRight], [x + r, y - r]],
    

                pointTypes: [PointType.CORNER, PointType.CORNER]
    

            }
    

    };

    The above would produce the paths and handles which I pushed into arrays to produce the shapes.

    That was the easy bit.  The harder bit was that I needed to adds arches of a given radius and width / sagitta.

    I wanted to do it mathematically but in the end took the path that I think the OP is taking of using ID or Ai as a crutch to do the math, so I got Ai to draw a circle and a correctly placed rectangle, excluded the rectangle from the circle copied the path of the resulting arc, removed the arc and added the path to the shapes entire path array.

    To draw a circle one would use 4 1/4 circles that would be easy enough, to draw an ellipse presumably one would average out the handles in some form of proportion to the translation or the ellipses anchor points from the circle anchor points.  I haven't experimented to get it to work.

    What I wanted to do was to make a generic function for segments of ellipses, of height h and width w starting from and a and ending at b.

    I know from you sin script tat you read up on the topic. Do you know how to go about it?

    Regards

    Trevor

    Trevor:
    Trevor:
    Legend
    October 12, 2015

    I would think that the left control points go to the left (750,1234) which in your specific case is between 2 and 3 and that the right control points go to the right (757, 1238) which in your case is between 3 and 4.

    ajaatshatru
    ajaatshatru作成者
    Inspiring
    October 12, 2015

    But I believe this is a quadratic Bezier curve and there need to be two control points to represent it accurately. How would that be satisfied if what you propose is true?

    Trevor:
    Trevor:
    Legend
    October 12, 2015

    I think it's cubic and not quadratic, I once looked into it and seem to remember that's what I found documented.

    Time for some googling

    契約条件Accessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices