y = mx + c格式的SVG行

我想繪製一個SVG行給定斜率和常數項或y=m*x +c格式。y = mx + c格式的SVG行

有沒有直接的方式來做到這一點在SVG或間接的方式？

在此先感謝。

來源

2014-03-25 Megh Parikh

待辦事項你已經繪製了軸並且想要覆蓋這個軸，或者你想繪製一個完整的圖？一行y = mx + c（特別是c部分）本身並不意味着太多。 – Phylogenesis

我的座標系是默認的svg，因爲我不是處理圖形，而是使用純歐幾里德幾何。所以這是一個輔助函數，用於繪製穿過給定點的線，並以θ角傾斜到另一條線。我也希望線條的長度是無限的（至少是適合的帆布）。 –

它也被用來找出兩個圓的交點，首先找出根軸。 –

<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弧度。

來源

2014-03-25 13:54:10 Phylogenesis

是的，這就是我正在做的。但svg支持浮點座標？ –

@MeghParikh是的。 – Phylogenesis

@MeghParikh根據文檔[此處]（http://www.w3.org/TR/SVG11/types.html#InterfaceSVGLength）。 – Phylogenesis

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>

來源

2014-03-25 19:22:00

-1

以下是我的代碼：

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]); 
}

，其中新線剛剛通過接受四個參數

和XSIZE和YSIZE創建行DOM節點是畫布的大小

來源

2014-03-26 06:19:52

y = mx + c格式的SVG行

回答

相關問題