Как использовать attr stroke-dasharray, штрих-линию, штрих-линию в raphaeljs

Может ли кто-нибудь дать мне пример этих атрибутов в действии: stroke-dasharray, stroke-linecap, stroke-linejoin, я попытался использовать их, но я не совсем понимаю структуру sentext для своих значений.

ОТВЕТЫ

Ответ 1

stroke-linecap

  • Правовые значения: butt | round | square | inherit
  • Пример
    Screenshot of above example

stroke-linejoin

  • Правовые значения: miter | round | bevel | inherit
  • Пример
    Screenshot of above example

stroke-dasharray

  • Правовые значения: список длин или процентов, разделенных запятыми или пробелами,
    например "100 20 0 20"
  • Пример (с использованием приведенных выше значений)
    enter image description here

Ответ 2

Ответ Phrogz отлично подходит для простого SVG, но этот вопрос также помечен Raphael, где все похоже, но немного отличается. В Рафаэле не так много хороших примеров инсульта, поэтому здесь представлена ​​полная живая демонстрация.

В нем есть примеры, описывающие, как использовать stroke-dasharray (пунктирные линии и пунктирные линии), stroke-linejoin (стиль углов хода) и stroke-linecap (стиль крышки штриховки) в Raphael.js.

Ссылка на демонстрационную версию jsfiddle

Используйте .attr({'stroke-dasharray': option}) для пунктирных/пунктирных линий в Рафаэле, с одним из этих параметров (без цифр, в отличие от чистого SVG):

["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."]

enter image description here

Используйте .attr({'stroke-linejoin': option}) для закругленных, скошенных или острых (митральных) углов в Рафаэле (то же, что и SVG, кроме наследования):

["bevel", "round", "miter"]

enter image description here

Вы также можете установить .attr({'stroke-miterlimit': decimal}), который управляет точкой отсечки, основанной на ширине хода и углу, за которым затупляются соединения (точные). То же, что и SVG-mitlimit, поэтому применяются документы SVG. Кросс-браузерные изменения в этом можно увидеть в jsfiddle выше (например, между Chrome и Firefox в Windows)

enter image description here

Используйте .attr({'stroke-linecap': option}) для управления шапками в конце пути с гладкими raphael:

["butt", "square", "round"]

enter image description here

Ответ 3

Обратите внимание, что этот ответ охватывает только stroke-dasharray и является дополнением к ответу от Phrogz.
Рафаэль не предоставляет много свободы для установки stroke-dasharray, как указано пользователем568458, и поскольку мне это нужно, чтобы работать как и другие создатели svg, я немного подружился в raphael.js, чтобы разместить все возможные значения stroke-dasharray.

addDashes = function (o, value, params) {
        var nvalue = dasharray[Str(value).toLowerCase()];
        if (nvalue!==undefined) {
            var width = o.attrs["stroke-width"] || "1",
                butt = {round: width, square: width, butt: 0}[o.attrs["stroke-linecap"] || params["stroke-linecap"]] || 0,
                dashes = [],
                i = nvalue.length;
            while (i--) {
                dashes[i] = nvalue[i] * width + ((i % 2) ? 1 : -1) * butt;
            }
            $(o.node, {"stroke-dasharray": dashes.join(",")});
        }else{
            $(o.node, {"stroke-dasharray": Str(value).toLowerCase()});
        }
    }

Замена предыдущего кода в файле чуть ниже, где определяется объект dasharray.

Ответ 4

Если вы хотите применить пунктирную линию стандартным способом SVG на объекте линии Рафаэля, это сработало для меня; в то время как мне не удавалось использовать период и дефисы, как это сделано по пути Рафаэля.

myLine.attr({stroke:'green'}).node.setAttribute('stroke-dasharray', '10,10');

Параметры (10,10 в этом примере) - это длина, пробел, и вы можете перебирать столько, сколько хотите. Например, 5, 5, 1, 5 будет короче тире с точками.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray