畫線 - 優文庫

我要抽2元之間行HTML頁面上畫線

的結果應該是這樣的： http://img2.timg.co.il/forums/1_173873919.JPG

我不知道什麼是最好的方式做到這一點

使用canvas和html5
使用背景圖像。
讓阿賈克斯動態圖像

我想知道什麼是最好的方式，如果有在網絡上一個簡單的演示

感謝

來源

2014-02-18 24sharon

什麼時候會發生圖像變化？ – mplungjan

線條是直線還是曲線？他們需要動態改變嗎？並且需要任何用戶交互（例如，允許用戶從左到右拖動一條線） – charlee

[如何在兩個div之間畫線？]（http://stackoverflow.com/questions/8672369/how-to-draw-a-line-之間，二，div的） –

使用<canvas>如果你想使用簡單的事情，如圈子和圖像和東西 - 對於div，你會想尋找替代品，如在Jquery或 - 像你說的 - javascript。對於<canvas>，您可以嘗試this和this

來源

2014-02-18 20:53:33 BruceWayne

有一種非常簡單的方法可以通過一些Javascript和HTML canvas標籤實現此目的。

DEMO HERE顯示如何繪製您的示例中最複雜的元素，其中有一個字段的行分支到兩個其他字段。

它（基本上）的工作原理如下。

開始與繪圖功能：

context.beginPath();

的理想的座標與功能：

context.moveTo(100, 150); 
    context.lineTo(450, 50);

然後執行抽獎：

context.stroke();

有一些偉大的教程HERE

來源

2014-02-18 20:56:08 Aaron

很多方法來解決你的需要：

下面是一個使用的HTML畫布一個解決辦法：http://jsfiddle.net/m1erickson/86f4C/

enter image description here

示例代碼（可以使用jQuery +完全自動化的CSS類）：

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> 
<style> 
    body{ background-color: ivory; margin:0; padding:0; } 
    #canvas{ 
     position:absolute; 
     border:1px solid red; 
     width:100%;height:100%; 
    } 
    .draggable{ 
     width:50px; 
     height:30px; 
     background:skyblue; 
     border:1px solid green; 
    } 
    .right{ 
     margin-left:100px; 
     background:salmon; 
    } 
    #wrap2{margin-top:-95px;} 
</style> 
<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    canvas.width=window.innerWidth; 
    canvas.height=window.innerHeight; 
    ctx.lineWidth=3; 

    var $canvas=$("#canvas"); 
    var canvasOffset=$canvas.offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 

    var $0=$("#0"); 
    var $1=$("#1"); 
    var $2=$("#2"); 
    var $0r=$("#0r"); 
    var $1r=$("#1r"); 
    var $2r=$("#2r"); 

    var connectors=[]; 
    connectors.push({from:$0,to:$0r}); 
    connectors.push({from:$1,to:$0r}); 
    connectors.push({from:$2,to:$2r}); 

    connect(); 

    $(".draggable").draggable({ 
     // event handlers 
     start: noop, 
     drag: connect, 
     stop: noop 
    }); 

    function noop(){} 

    function connect(){ 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     for(var i=0;i<connectors.length;i++){ 
      var c=connectors[i]; 
      var eFrom=c.from; 
      var eTo=c.to; 
      var pos1=eFrom.offset(); 
      var pos2=eTo.offset(); 
      var size1=eFrom.size(); 
      var size2=eTo.size(); 
      ctx.beginPath(); 
      ctx.moveTo(pos1.left+eFrom.width()+3,pos1.top+eFrom.height()/2); 
      ctx.lineTo(pos2.left+3,pos2.top+eTo.height()/2); 
      ctx.stroke(); 

     } 
    } 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
    <div> 
     <div id="0" class="draggable">0</div> 
     <div id="1" class="draggable">1</div> 
     <div id="2" class="draggable">2</div> 
    </div> 
    <div id="wrap2"> 
     <div id="0r" class="draggable right">0</div> 
     <div id="1r" class="draggable right">1</div> 
     <div id="2r" class="draggable right">2</div> 
    </div> 
</body> 
</html>

來源

2014-02-18 21:59:08 markE

-1

這裏是一個link的要點，它使用javascript（jquery）在任何2個html元素之間繪製路徑（並在窗口大小調整的情況下重繪它）。

demo

來源

2014-04-26 18:14:39 user3254083

畫線

回答

相關問題