Reputation: 13
How can I add an open triangle arrow-end to a line in Raphael JS?
The closest to it is block-wide-long, but I would like to make an arrow-end empty inside.
var path_1 = paper.path('M10 50 L250 50');
path_1.attr({stroke:'#FF0000', 'stroke-width': 6 ,'arrow-end': 'block-wide-long'});
Upvotes: 0
Views: 210
Reputation: 13
I managed to create open triangle arrow head by modifing raphael library.
Near line 3769 added a marker:
markers = {
block: "M5,0 0,2.5 5,5z",
**opentriangle: "M5,1 2,2.5 5,4z",**
classic: "M5,0 0,2.5 5,5 3.5,3 3.5,2z",
diamond: "M2.5,0 5,2.5 2.5,5 0,2.5z",
open: "M6,1 1,3.5 6,6",
oval: "M2.5,0A2.5,2.5,0,0,1,2.5,5 2.5,2.5,0,0,1,2.5,0z"
},
Near line 3907 modified while loop:
while (i--) {
switch (values[i]) {
case "block":
**case "opentriangle":**
case "classic":
case "oval":
case "diamond":
case "open":
case "none":
type = values[i];
break;
case "wide": h = 5; break;
case "narrow": h = 2; break;
case "long": w = 5; break;
case "short": w = 2; break;
}
}
Near line 4995 modified while loop:
while (i--) {
switch (values[i]) {
case "block":
**case "opentriangle":**
case "classic":
case "oval":
case "diamond":
case "open":
case "none":
type = values[i];
break;
case "wide":
case "narrow": h = values[i]; break;
case "long":
case "short": w = values[i]; break;
}
}
Near line 3925 added else if block:
if (type == "open") {
w += 2;
h += 2;
t += 2;
dx = 1;
refX = isEnd ? 4 : 1;
attr = {
fill: "none",
stroke: attrs.stroke
};
}
**else if(type == "opentriangle"){
w += 5;
h += 5;
dx = 7;
refX = 0;
attr = {
fill: "none",
stroke: attrs.stroke,
};
}**
else {
refX = dx = w / 2;
attr = {
fill: attrs.stroke,
stroke: "none"
};
}
Upvotes: 1
Reputation: 1736
From the raphael reference:
arrowhead on the end of the path. The format for string is < type >[-< width >[-< length >]]. Possible types: classic, block, open, oval, diamond, none, width: ...
So an alternative option could be open
.
var line = paper.path('M10 50 L250 50');
line.attr({stroke:'#FF0000', 'stroke-width': 6 ,'arrow-end': 'open-wide-long'});
See it here: http://jsfiddle.net/Ljoe1rpw/2/
If you wish to use an empty triangle you will have to modify the raphael source.
Upvotes: 0