这种设计将箭头映射到数学短语中的任何指定字符
此设计使用 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。