以編程方式操作手繪線條的最佳方法

-1

請注意，我沒有數學或計算機圖形學的背景知識。以編程方式操作手繪線條的最佳方法

我想知道如何編程手動線的最佳方式，如果它甚至是可能的。

繪圖操作必須在html頁面中完成。（可能無關）

方法我強硬關：

畫一條線到畫布（有漲有跌手繪線） - >轉換爲位圖 - > somewhow解讀爲此對位線和操縱它的形式（這是可能的嗎？）
而不是從位圖解釋，在繪圖時刻有一種按鈕來切換捕捉打開/關閉和捕捉後，產生某種數學函數，我可以操縱並從中生成新的位圖

來源

2013-12-17 Enoque Duarte

是的，你可以。

這並不難，但是有很多小的編碼方面需要學習。

如果您處於「繪圖」模式，您將收集用戶點擊的鼠標點並從所有這些點中劃出一條線。

如果您處於「編輯」模式，您可以讓用戶將其中一個收集的點拖到新的座標上，並從所有編輯的點中劃出一條線。

這裏的啓動代碼，你看看和學習加上一個小提琴：http://jsfiddle.net/m1erickson/J5PrN/

<!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> 

<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    ctx.lineCap = "round"; 
    ctx.lineJoin = "round"; 
    ctx.lineWidth=3; 

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

    var points=[]; 
    var selected=-1; 
    var mode="draw"; 

    function draw(){ 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.beginPath(); 
     ctx.moveTo(points[0].x,points[0].y); 
     for(var i=1;i<points.length;i++){ 
      ctx.lineTo(points[i].x,points[i].y); 
     } 
     ctx.stroke(); 
     if(mode=="edit"){ 
      for(var i=0;i<points.length;i++){ 
       ctx.beginPath(); 
       ctx.arc(points[i].x,points[i].y,10,0,Math.PI*2); 
       ctx.closePath(); 
       ctx.fill(); 
      } 
     } 
    } 

    function handleMouseDown(e){ 
     startX=parseInt(e.clientX-offsetX); 
     startY=parseInt(e.clientY-offsetY); 

     if(mode=="draw"){ 
      points.push({x:startX,y:startY}); 
      draw(); 
     }else if(mode=="edit"){ 
      for(var i=0;i<points.length;i++){ 
       var pt=points[i]; 
       var dx=startX-pt.x; 
       var dy=startY-pt.y; 
       if(dx*dx+dy*dy<100){ 
        selected=i; 
        return; 
       } 
      } 
     } 

    } 

    function handleMouseUp(e){ 
     selected=-1; 
    } 

    function handleMouseOut(e){ 
     selected=-1; 
    } 

    function handleMouseMove(e){ 
     if(selected<0){return;} 

     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     // Put your mousemove stuff here 
     if(selected<0){return;} 
     var dx=mouseX-startX; 
     var dy=mouseY-startY; 
     startX=mouseX; 
     startY=mouseY; 
     var pt=points[selected]; 
     points[selected]={x:pt.x+dx,y:pt.y+dy}; 
     draw(); 
    } 

    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 
    $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
    $("#canvas").mouseup(function(e){handleMouseUp(e);}); 
    $("#canvas").mouseout(function(e){handleMouseOut(e);}); 

    $("#draw").click(function(){ 
     mode="draw"; 
     draw(); 
     $instructions.text("Click points to draw a line"); 
    }); 
    $("#edit").click(function(){ 
     mode="edit"; 
     draw(); 
     $instructions.text("Drag points to move the line"); 
    }); 
    $instructions=$("#instructions"); 


}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <button id="draw">Add to Line</button> 
    <button id="edit">Change Line</button><br> 
    <p id="instructions">Click points to draw a line</p> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

來源

2013-12-17 17:02:58 markE

我不能對HTML說話，但在大多數應用程序中我看到(such as this one)，手繪線條被分解成小的直線段。這是因爲感應系統（觸摸或鼠標）爲您的應用程序提供了一點（連續）的點數;它沒有給出實際的線路。然後使用各個部分來完成應用程序的任何目標。

在繪製線條的情況下，繪製線條時，應用程序獲取點並使其平滑（三次樣條，最小二乘多項式擬合，b樣條等），然後將平滑線繪製到屏幕上顏色和風格（鋼筆，鉛筆，粉筆等）。這給用戶即時反饋他們的手在哪裏移動，等等。

在手勢控制的情況下，可能會繪製一些覆蓋線以給予用戶反饋，但片段的處理方式不同以確定手勢（此可能非常複雜）。

將行緩存爲一系列手勢，可以爲撤銷/重做提供選項。您還可以將繪圖存儲爲一系列手勢，而不是固定的位圖。

對您有幫助嗎？

來源

2013-12-17 12:25:55 FuzzyBunnySlippers

以編程方式操作手繪線條的最佳方法

回答

相關問題