我真的不知道如何命名这个标题，如果标题令人困惑，我很抱歉。
我想要一种方法来绘制各种类型/方向的箭头，具体取决于它们指向的字符串的长度(以及其他因素)。请参见下图。
我不能只制作一张图片(像这张图片)，因为数字和字母是随机生成的。因此，我不知道数字是 1 位、2 位还是 3 位数字(或者它是否附有字母)。
基本上，有没有办法将“节点”(可能是错误的词，但我不知道还能说什么)的中心与箭头的起点和终点连接起来？
为此，我愿意接受所有的网络编程。 Javascript 库、Raphael.js、canvas……最佳创意获胜!
最佳答案
此设计将箭头映射到数学短语中的任何指定字符
此设计使用 html canvas 绘制文本数学短语和连接的箭头。
它的工作原理是让您在数学短语中指定任何字符，并要求在该字符上绘制向上或向下箭头。
// 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");
这是代码和 fiddle :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 编辑: 如果有人感兴趣，这是我最终使用的最后一个 fiddle : http://jsfiddle.net/53mQD/2/ 我把红色的箭头去掉，换成了线条。所有功劳归于 markE。
关于php - "Mapping"指向字符的箭头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17819300/