Question

我真的不知道如何标题，如果标题令人困惑，那就很抱歉。

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

Arrows example image

我不能只制作一个图像（就像这个一样），因为数字和字母会随机生成。所以，我不知道一个数字是1,2或3位数字（或者它是否附有字母）。

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

我对此进行了全面的网络编程。 Javascript库，Raphael.js，canvas ....最好的主意获胜！

Answer 1

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

enter image description here

此设计使用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。

将“箭头”映射到字符

1 个答案: