Как рассчитать путь рекламы в SVG? - PullRequest
Новая
       10

Как рассчитать путь рекламы в SVG?

0 голосов
/ 05 мая 2019

enter image description here пытается установить svg углы пути.

пока не удалось установить закругленные нижние углы,

код элемента пути: 

          path = 'M ' + points[0][indexX] + ',' + (points[0][indexY] - 7) + ' ' +
            'L' + points[1][indexX] + ',' + (points[1][indexY] + bar_radius) + ' ' +
            'Q' + points[1][indexX] + ',' + points[1][indexY] + ' ' + (points[1][indexX] + bar_radius) + ',' + points[1][indexY] + ' ' +
            'L' + (points[2][indexX] - bar_radius) + ',' + points[2][indexY] + ' ' +
            'Q' + points[2][indexX] + ',' + points[2][indexY] + ' ' + points[2][indexX] + ',' + (points[2][indexY] + bar_radius) + ' ' +
            'L' + points[3][indexX] + ',' + (points[3][indexY] - 7) + ' ' +
            'z';

d="M 44.2,291 L44.2,261.42857142857144 Q44.2,259.42857142857144 46.2,259.42857142857144 L57.800000000000004,259.42857142857144 Q59.800000000000004,259.42857142857144 59.800000000000004,261.42857142857144 L59.800000000000004,291 z"

Ответы [ 2 ]

0 голосов
/ 06 мая 2019

Вы не предоставили много информации, но я предполагаю, что points[0..3] в следующем порядке: верхний левый, нижний левый, нижний правый, верхний правый.Вот как это выглядит для меня.

Я думаю, что ваша ошибка заключалась в том, что вы, возможно, забыли, что Y увеличивается вниз.Некоторые знаки в вашей формуле пути были неправильными.

  • + bar_radius во второй строке должно быть - bar_radius.
  • + bar_radius в пятой строке должно быть- bar_radius. 

const indexX = 0, indexY = 1;
const bar_radius = 10;

const points = [[30, 10],
                [30, 190],
                [70, 190],
                [70, 10]];

const bar = document.getElementById("bar");

path = 'M ' + points[0][indexX] + ',' + (points[0][indexY] - 7) + ' ' +
        'L' + points[1][indexX] + ',' + (points[1][indexY] - bar_radius) + ' ' +
        'Q' + points[1][indexX] + ',' + points[1][indexY] + ' ' + (points[1][indexX] + bar_radius) + ',' + points[1][indexY] + ' ' +
        'L' + (points[2][indexX] - bar_radius) + ',' + points[2][indexY] + ' ' +
        'Q' + points[2][indexX] + ',' + points[2][indexY] + ' ' + points[2][indexX] + ',' + (points[2][indexY] - bar_radius) + ' ' +
        'L' + points[3][indexX] + ',' + (points[3][indexY] - 7) + ' ' +
        'z';
        
bar.setAttribute("d", path);
<svg width="100" height="200">
  <path id="bar" d="" fill="rebeccapurple"/>
</svg>
0 голосов
/ 05 мая 2019

Похоже, вы пытаетесь нарисовать кривые внизу этих баров. Если у вас нет особых причин для этого, вероятно, вы не захотите добиться желаемого внешнего вида.

Как оказалось, вы можете указать угловой радиус для прямоугольных объектов. При таком подходе ваша задача становится совершенно тривиальной. Вы больше не указываете каждую вершину, а только положение, размер и угловой радиус. 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 40 40" >
    <rect
       style="opacity:1;fill:#0000ff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect4189"
       width="15.5"
       height="31.5"
       x="0"
       y="0"
       rx="2"
       ry="2" />
</svg>
...