nv-number-ellipse v0.0.2

nv-number-ellipse

• nv-number-ellipse
• get points on svg-A parameters : rx ry x-axis-rotation large-arc-flag sweep-flag x y

install

• npm install nv-number-ellipse

usage

  const {calc_cxcy,sample} = require("nv-number-ecllipse");

example

get cx,cy

    const {calc_cxcy} = require("nv-number-ecllipse");

    //https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths#large-arc-flag

    var [cx,cy] = calc_cxcy(110,215,30, 50, 0, 0, 1, 162.55, 162.45)

    var svg=`
    <?xml version="1.0" standalone="no"?>
    <svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 315
               L 110 215
               A 30 50 0 0 1 162.55 162.45
               L 172.55 152.45
               A 30 50 -45 0 1 215.1 109.9
               L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
      <circle cx="${cx}" cy="${cy}" r="1" stroke="red" fill="red" stroke-width="5"/>
    </svg>
    `

    /*
    <?xml version="1.0" standalone="no"?>
    <svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 315
               L 110 215
               A 30 50 0 0 1 162.55 162.45
               L 172.55 152.45
               A 30 50 -45 0 1 215.1 109.9
               L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
      <circle cx="136.275" cy="188.725" r="1" stroke="red" fill="red" stroke-width="5"/>
    </svg>

    */

get points

    const {sample} = require("nv-number-ecllipse");


    var pts = sample(5,110,215,30, 50, 0, 0, 1, 162.55, 162.45) ;

    var svg=`
    <?xml version="1.0" standalone="no"?>
    <svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 315
               L 110 215
               A 30 50 0 0 1 162.55 162.45
               L 172.55 152.45
               A 30 50 -45 0 1 215.1 109.9
               L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"
      />
      @slots@
      </svg>
    `

    var slots = pts.map(e=>`    <circle cx="${e[0]}" cy="${e[1]}" r="1" stroke="red" fill="red" stroke-width="5"/>`)
    var slot_str = slots.join('\n');

    svg = svg.replace('@slots@',slot_str)


    /*
    <?xml version="1.0" standalone="no"?>
    <svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 315
               L 110 215
               A 30 50 0 0 1 162.55 162.45
               L 172.55 152.45
               A 30 50 -45 0 1 215.1 109.9
               L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"
      />
          <circle cx="110.75119199649082" cy="215" r="1" stroke="red" fill="red" stroke-width="5"/>
        <circle cx="107.80523851522463" cy="204.49" r="1" stroke="red" fill="red" stroke-width="5"/>
        <circle cx="106.4411502484175" cy="193.98" r="1" stroke="red" fill="red" stroke-width="5"/>
        <circle cx="106.4411502484175" cy="183.47" r="1" stroke="red" fill="red" stroke-width="5"/>
        <circle cx="107.80523851522463" cy="172.95999999999998" r="1" stroke="red" fill="red" stroke-width="5"/>
        <circle cx="162.55" cy="162.45" r="1" stroke="red" fill="red" stroke-width="5"/>
        <circle cx="110" cy="164.59431558045742" r="1" stroke="red" fill="red" stroke-width="5"/>
        <circle cx="120.51" cy="146.18531999415134" r="1" stroke="red" fill="red" stroke-width="5"/>
        <circle cx="131.02" cy="139.49806024926775" r="1" stroke="red" fill="red" stroke-width="5"/>
        <circle cx="141.53" cy="139.49806024926775" r="1" stroke="red" fill="red" stroke-width="5"/>
        <circle cx="152.04000000000002" cy="146.18531999415134" r="1" stroke="red" fill="red" stroke-width="5"/>
        <circle cx="162.55" cy="162.45" r="1" stroke="red" fill="red" stroke-width="5"/>
      </svg>

    */

REFERENCE

• https://stackoverflow.com/questions/197649/how-to-calculate-center-of-an-ellipse-by-two-points-and-radius-sizes

LICENSE

• ISC