Question

如何在Raphael JS的线条中添加一个空心三角箭头？最接近它的是块宽，但我想在内部留空箭头。

var path_1 = paper.path('M10 50 L250 50');
path_1.attr({stroke:'#FF0000', 'stroke-width': 6 ,'arrow-end': 'block-wide-long'});

JSFiddle

Answer 1

我设法通过修改raphael库来创建开放三角形箭头。

第3769行附近添加了一个标记：

 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"
    },

在循环中修改了第3907行：

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;
            }
        }

第4995行修改了while循环：

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;
        }
    }

在第3925行附近添加了if：

 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"
            };
        }

Answer 2

来自raphael reference：

路径末端的箭头。字符串的格式是＆lt; type＆gt; [ - ＆lt;宽度> [ - ＆lt;长度＆gt;]]。可能的类型：经典，块，开放，椭圆，钻石，无，宽度：...

因此，另一种选择可能是open。

var line = paper.path('M10 50 L250 50');
line.attr({stroke:'#FF0000', 'stroke-width': 6 ,'arrow-end': 'open-wide-long'});

请在此处查看：http://jsfiddle.net/Ljoe1rpw/2/

如果您想使用空三角形，则必须修改raphael源。

如何在线上添加一个空心三角箭头？

2 个答案: