1

我真的不知道如何命名，如果标题令人困惑，请见谅。

我想要一种方法来绘制各种类型/方向的箭头，具体取决于它们指向的字符串的长度（以及其他因素）。见下图。

箭头示例图像

我不能只制作一张图片（比如这张），因为数字和字母是随机生成的。所以，我不知道一个数字是 1、2 还是 3 位数字（或者它是否会附有字母）。

基本上，有没有办法将“节点”的中心（可能是错误的词，但我不知道还能说什么）与箭头的开始和结束？

为此，我对网络编程的全部范围持开放态度。Javascript 库、Raphael.js、canvas.... 最佳创意胜出！

4

1 回答 1

2

此设计将箭头映射到数学短语中的任何指定字符

在此处输入图像描述

此设计使用 html 画布绘制文本数学短语和连接箭头。

它的工作原理是让您在数学短语中指定任何字符并要求在该字符上绘制向上或向下箭头。

    // draw an up arrow on the current phrase as character#1
    drawUpArrow(phrase,30,80,1,"red");

    // draw a down arrow on the current phrase at character#5
    drawDownArrow(phrase,30,80,5,"green");

您可以根据需要指定任意数量的箭头。

    // draw arrow on characters #1,3,5,7
    drawUpArrow(phrase,30,80,1,"red");
    drawDownArrow(phrase,30,80,3,"green");
    drawDownArrow(phrase,30,80,5,"green");
    drawDownArrow(phrase,30,80,7,"green");

这是代码和小提琴：http: //jsfiddle.net/m1erickson/dUexE/

 <!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:15px; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.font="14pt Verdana";

    var phrase="(5c + 3)(7n + 2)";
    var connectorPoints=[]
    var connectorPoints2=[]

    // draw start-arrow at character #1
    // draw end-arrows at characters #5 and #12
    drawPhrase(phrase,30,80);
    connectorPoints.push(drawUpArrow(phrase,30,80,2,"red"));
    connectorPoints.push(drawDownArrow(phrase,30,80,10,"green"));
    connectorPoints.push(drawDownArrow(phrase,30,80,15,"green"));
    temporaryConnector(connectorPoints,"green");

    connectorPoints2.push(drawDownArrowUnder(phrase,30,80,7,"red"));
    connectorPoints2.push(drawUpArrowUnder(phrase,30,80,10,"green"));
    connectorPoints2.push(drawUpArrowUnder(phrase,30,80,15,"green"));
    temporaryConnector(connectorPoints2,"green");



    // draw the phrase at X/Y
    function drawPhrase(text,x,y){
        ctx.fillStyle="black";
        ctx.fillText(text,x,y);
    }

    function calcMidX(text,x,letterNumber){
        var text1=text.substr(0,letterNumber-1);
        var text2=text.substr(0,letterNumber);

        var startX=ctx.measureText(text1).width;
        var endX=ctx.measureText(text2).width;
        var midX=startX+(endX-startX)/2;

        return(midX);        
    }


    function drawArrow(x,y,y1,y2,y3,color){
        // arrowhead
        ctx.beginPath();
        ctx.moveTo(x,y-y1);
        ctx.lineTo(x-5,y-y2);
        ctx.lineTo(x+5,y-y2);
        ctx.closePath();
        ctx.fillStyle=color;
        ctx.fill();
        // arrowtail
        ctx.beginPath();
        ctx.moveTo(x,y-y2);
        ctx.lineTo(x,y-y3);
        ctx.strokeStyle=color;
        ctx.lineWidth=3;
        ctx.stroke();
    }

    // draw a down-arrow at the specified letterNumber
    function drawDownArrow(text,x,y,letterNumber,color){
        x+=calcMidX(text,x,letterNumber);
        drawArrow(x,y,18,28,35,color);
        return({x:x,y:y-35});
    }

    // draw an up-arrow at the specified letterNumber
    function drawUpArrow(text,x,y,letterNumber,color){
        x+=calcMidX(text,x,letterNumber);
        drawArrow(x,y,35,25,18,color);
        return({x:x,y:y-35});
    }


    // draw a down-arrow at the specified letterNumber
    function drawDownArrowUnder(text,x,y,letterNumber,color){
        x+=calcMidX(text,x,letterNumber);
        drawArrow(x,y,-22,-12,-5,color);
        return({x:x,y:y+22});
    }

    // draw an up-arrow at the specified letterNumber
    function drawUpArrowUnder(text,x,y,letterNumber,color){
        x+=calcMidX(text,x,letterNumber);
        drawArrow(x,y,-5,-15,-22,color);
        return({x:x,y:y+22});
    }

    function temporaryConnector(aConnector,color){
        var pt1=aConnector[0];
        var pt2=aConnector[aConnector.length-1];
        ctx.beginPath();
        ctx.moveTo(pt1.x,pt1.y);
        ctx.lineTo(pt2.x+2,pt2.y);
        ctx.strokeStyle=color;
        ctx.lineWidth=3;
        ctx.stroke();
    }


}); // end $(function(){});
</script>

</head>

<body>
    <p>Red arrow shows start</p>
    <p>Green arrow shows end</p>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

从 OP 编辑​​：如果有人感兴趣，这是我最终使用的最后一个小提琴：http: //jsfiddle.net/53mQD/2/ 我取出红色箭头并用线条替换它们。所有功劳归于markE。

于 2013-07-24T00:22:34.340 回答