Может ли кто-нибудь дать мне пример этих атрибутов в действии: stroke-dasharray, stroke-linecap, stroke-linejoin, я попытался использовать их, но я не совсем понимаю структуру sentext для своих значений.
Как использовать attr stroke-dasharray, штрих-линию, штрих-линию в raphaeljs
Ответ 1
stroke-linecap
- Правовые значения:
butt
|round
|square
|inherit
- Пример
stroke-linejoin
- Правовые значения:
miter
|round
|bevel
|inherit
- Пример
stroke-dasharray
- Правовые значения: список длин или процентов, разделенных запятыми или пробелами,
например"100 20 0 20"
- Пример (с использованием приведенных выше значений)
Ответ 2
Ответ Phrogz отлично подходит для простого SVG, но этот вопрос также помечен Raphael, где все похоже, но немного отличается. В Рафаэле не так много хороших примеров инсульта, поэтому здесь представлена полная живая демонстрация.
В нем есть примеры, описывающие, как использовать stroke-dasharray
(пунктирные линии и пунктирные линии), stroke-linejoin
(стиль углов хода) и stroke-linecap
(стиль крышки штриховки) в Raphael.js.
Ссылка на демонстрационную версию jsfiddle
Используйте .attr({'stroke-dasharray': option})
для пунктирных/пунктирных линий в Рафаэле, с одним из этих параметров (без цифр, в отличие от чистого SVG):
["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."]
Используйте .attr({'stroke-linejoin': option})
для закругленных, скошенных или острых (митральных) углов в Рафаэле (то же, что и SVG, кроме наследования):
["bevel", "round", "miter"]
Вы также можете установить .attr({'stroke-miterlimit': decimal})
, который управляет точкой отсечки, основанной на ширине хода и углу, за которым затупляются соединения (точные). То же, что и SVG-mitlimit, поэтому применяются документы SVG. Кросс-браузерные изменения в этом можно увидеть в jsfiddle выше (например, между Chrome и Firefox в Windows)
Используйте .attr({'stroke-linecap': option})
для управления шапками в конце пути с гладкими raphael:
["butt", "square", "round"]
Ответ 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