Question

我想在斜率和常数或y=m*x +c格式下绘制 SVG行。

有没有直接的方法在SVG或间接方式中执行此操作？

提前致谢。

Answer 1

<line>代码仅支持起始和结束属性（x1，y1，x2，y2）。因此，您需要手动选择画布外的x坐标并使用y2 = y1 + m（x2 - x1）。

修改

查看规范，可以根据需要转换单个元素：

<line ... transform="translate(x, y) rotate(theta)" />

其中theta是以度为单位的顺时针旋转角度。

所以你可以画一条从（-10000,0）到（10000,0）的长水平线，比如说，然后应用适当的旋转和平移来定位它：

<line x1="-10000" y1="0" x2="10000" y2="0" transform="translate(150, 200) rotate(-30)" />

将绘制一条（看似无穷无尽的）直线（150,200）的斜率π/ 6弧度。

Answer 2

SVG是显示几何的好方法。但是，您必须知道一些Javascript才能构建动态显示。

下面是一个示例，您可以将其复制到HTML文件中并在浏览器中查看。它显示了从两个点绘制一条线，然后使用等式y=mx+c将其扩展到可视svg查看区域（400x400）的末尾。请注意，svg中的y轴从左上角开始，其中y坐标向向下作为正方向。

绘制线条并扩展它会使用一些javascript。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Draw Line y=mx+b</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4>Draw Line y=mx+b</h4>
Red line is original points. Dashed extends to start(0)/end(400) of x axis
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'>
<svg id="mySVG" width="400" height="400">
<line id="myLine2" stroke="black" stroke-width="3" stroke-dasharray="10 10" />
<line id="myLine1" stroke="red" stroke-width="5" />
</svg>
</div>
  <br />SVG Source:<br />
<textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:200px'></textarea>
  <br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<div id='browserDiv' style='padding:5px;position:absolute;top:5px;left:5px;background-color:gainsboro;'>OK in:IE11/CH32/FF23<br /></div>
<script id=myScript>
function DrawLineToAxis()
{
    var x1=120
    var y1=150
    var x2=360
    var y2=290
    var m=(y2-y1)/(x2-x1)
    myLine1.setAttribute("x1",x1)
    myLine1.setAttribute("y1",y1)
    myLine1.setAttribute("x2",x2)
    myLine1.setAttribute("y2",y2)

    /*
    y=m*x-m*120+150
    */
    //---extend to x=0 x=400
    x1=0
    y1=-m*120+150
    x2=400
    y2=m*x2-m*120+150

    myLine2.setAttribute("x1",x1)
    myLine2.setAttribute("y1",y1)
    myLine2.setAttribute("x2",x2)
    myLine2.setAttribute("y2",y2)
}

</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
    DrawLineToAxis()
    svgSourceValue.value=svgDiv.innerHTML
    jsValue.value=myScript.text
}
</script>

</body>

</html>

Answer 3

以下是我的代码：

function linemc(m,c){
var x,y,xm=[],ym=[];

x=-1;y=m*x+c;if(y>=0&&y<ysize) {xm.push(x);ym.push(y);}
x=xsize+1;y=m*x+c;if(y>=0&&y<ysize) {xm.push(x);ym.push(y);}

y=-1;x=(y-c)/m;if(x>=0&&x<xsize+1) {xm.push(x);ym.push(y);}
y=ysize+1;x=(y-c)/m;if(x>=0&&x<xsize+1) {xm.push(x);ym.push(y);}

return new line(xm[0],ym[0],xm[1],ym[1]);
}

其中new line通过接受四个参数

为行创建一个DOM节点

和xsize和ysize是画布的大小

SVG行以y = mx + c格式表示

3 个答案: