How to add elliptical arc curve commands

[truegold]

Hi Vincent,

I am trying to create a routine that will create 12 (or more) segments in a circle. I've attached an image from this page I am studying as an example: [https://observablehq.com/@haakenlid/svg-circle]

As far as I can tell, the only missing functions in the SVG class are "A" and "a".

All the other letter functions are expecting a collection of x,y coordinates. Elliptical arc curves require many more parameters. How should I extend the SVG class to accommodate these parameters:

A | a: (rx; ry; x-axis-rotation; large-arc-flag; sweep-flag; x; y)

Appreciate your help, John...

[truegold]

Hi Vincent,

I think you might be back from a short vacation? Anyway, any chance of an answer?

Appreciate, John...

[vdelachaux]

Hello John, Yes, I'm back from vacation :-) You're right, the "A" & "a" functions don't exist yet, as I hadn't needed them ;-). I'll see if I can implement them easily...

[vdelachaux]

A new version with A(...) & a(...) has just been released.

var $svg : cs.svg

$svg:=cs.svg.new()

$svg.rect(1198; 398).position(1; 1)\
.stroke("blue")

$svg.path()\
.fill("red")\
.stroke("blue")\
.stroke(5)\
.M([300; 200])\
.h(-150)\
.a(150; 150; 0; 1; 0; 150; -150)\
.Z()

$svg.path(""; "root")\
.fill("yellow")\
.stroke("blue")\
.stroke(5)\
.M([275; 175])\
.v(-150)\
.a(150; 150; 0; 0; 0; -150; 150)\
.Z()

$svg.path(""; "root")\
.fill("none")\
.stroke("red")\
.stroke(5)\
.M([600; 350]).l([50; -25])\
.a(25; 25; -30; 0; 1; 50; -25).l([50; -25])\
.a(25; 50; -30; 0; 1; 50; -25).l([50; -25])\
.a(25; 75; -30; 0; 1; 50; -25).l([50; -25])\
.a(25; 100; -30; 0; 1; 50; -25).l([50; -25])

$svg.preview()

to obtain

HTH Vincent

[truegold]

Hi Vincent,

Merci!!!

Very much appreciate you as always!

John…

On Aug 10, 2023, at 6:29 AM, Vincent de Lachaux @.***> wrote:

A new version with A(...) & a(...) has just been released.

var $svg : cs.svg

$svg:=cs.svg.new()

$svg.rect(1198; 398).position(1; 1)\ .stroke("blue")

$svg.path()\ .fill("red")\ .stroke("blue")\ .stroke(5)\ .M([300; 200])\ .h(-150)\ .a(150; 150; 0; 1; 0; 150; -150)\ .Z()

$svg.path(""; "root")\ .fill("yellow")\ .stroke("blue")\ .stroke(5)\ .M([275; 175])\ .v(-150)\ .a(150; 150; 0; 0; 0; -150; 150)\ .Z()

$svg.path(""; "root")\ .fill("none")\ .stroke("red")\ .stroke(5)\ .M([600; 350]).l([50; -25])\ .a(25; 25; -30; 0; 1; 50; -25).l([50; -25])\ .a(25; 50; -30; 0; 1; 50; -25).l([50; -25])\ .a(25; 75; -30; 0; 1; 50; -25).l([50; -25])\ .a(25; 100; -30; 0; 1; 50; -25).l([50; -25])

$svg.preview() to obtain https://user-images.githubusercontent.com/623020/259756891-26b12ff1-36ae-4b31-b80a-46850b52937d.png HTH Vincent

— Reply to this email directly, view it on GitHub https://github.com/vdelachaux/SVG-with-Classes/issues/5#issuecomment-1673229049, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGECHC27YQT3NKL7EFRND4LXUTO4FANCNFSM6AAAAAA2KPX364. You are receiving this because you authored the thread.

[truegold]

Hi Vincent,

The svg.M and svg.l is broken if used in 4D v19R8. It works if I use 4D v20R2. Do I need to update to a beta version of 4D v20? I've attached a screenshot so you can see.

Thanks, John...

[truegold]

Hi Vincent,

I tried replacing using New Collection(coord; coord) but that doesn't fix it either. I still get the xml errors.

John...

[truegold]

Hi Vincent,

Ok, please disregard. Changing to New Collection(...) fixed the issues. It now works in 4D v19R8. I had inadvertently NOT copied all the lines and didn;t notice until after I traced every line through.

Sorry for the noise...

John...

[vdelachaux]

FYO I've just committed new high-level commands for curves…

but the HDIs are with the [,] syntax :-(

[truegold]

Hi Vincent,

Thank you!!!

I’m pretty sure I am going to need several types of those curves. So I’m very happy you’ve extended the class.

Again I cannot express my appreciation enough!

John…

On Aug 11, 2023, at 1:02 PM, Vincent de Lachaux @.***> wrote:

FYO I've just committed new high-level commands for curves…

— Reply to this email directly, view it on GitHub https://github.com/vdelachaux/SVG-with-Classes/issues/5#issuecomment-1675302672, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGECHC4GQH7FVVCO63WCZS3XU2FTRANCNFSM6AAAAAA2KPX364. You are receiving this because you authored the thread.