1. 首頁
  2. 問答
  3. 無法切換回畫筆工具在畫布上進行繪製

無法切換回畫筆工具在畫布上進行繪製

2013-04-10 34 views
0

所以我有我的畫筆和橡皮擦工具。我遇到的問題是，起初我可以在畫布上繪製草圖，但在切換到橡皮擦後，如果再次選擇畫筆，它會保留在橡皮擦工具中。我嘗試使用，如果其他但不能使它的工作。無法切換回畫筆工具在畫布上進行繪製

tool = new brushTool(); 
$('#brushTool').click(brushTool); 
function brushTool() { 
    var tool = this; 
    this.mouseStart = false; 

$('#eraserTool').click(eraserTool); 
function eraserTool() { 
    context.globalCompositeOperation = "destination-out"; 
    context.strokeStyle = "rgba(0,0,0,1)"; 
} 


    this.mousedown = function (e) { 
     tool.mouseStart = true; 
     context.beginPath(); 
     context.moveTo(x, y); 
     context.lineTo(x,y); 
     context.lineCap = 'round'; 
     context.lineWidth = document.getElementById('brush_size').value; 
     context.strokeStyle = document.getElementById('color').value; 
     context.stroke(); 
    }; 


    this.mousemove = function (e) { 
     if (tool.mouseStart) { 
     context.lineTo(x, y); 
     context.stroke(); 
     } 
    }; 

    this.mouseup = function (e) { 
     if (tool.mouseStart) { 
     tool.mousemove(e); 
     tool.mouseStart = false; 
     } 
    }; 
    }

來源

2013-04-10 lifeisgood

回答

0

爲您使用JavaScript「類」的榮譽！

下面介紹如何製作您的Tool類。

它看起來像你想如何將工具無論是作爲刷或橡皮擦讓你的工具類需要一個「類型」變量知道這是電流模式（刷/橡皮擦）

// create your Tool 「class」 
    function Tool(){ 

     // this is your tool’s current mode: none, brush, eraser 
     var type="none"; 

    }

這裏的作用爲您的Tool類添加功能（通常稱爲方法 - 但它們實際上是JavaScript功能）。

您可以使用原型聲明之外的類函數的「函數Tool（）」定義。這樣，每個工具對象都不會被它自己的方法副本壓低。如果你創建了10個工具，他們將能夠使用你在原型上定義的常用方法。

// this is where you define what you want the tool to do now (brush/eraser) 
    Tool.prototype.activate=function(newType){ … }; 

    // start a new line (called by tool.mousedown) 
    Tool.prototype.startLine=function(){ … }; 

    // draw a new line segment (called by tool.mousemove) 
    Tool.prototype.drawLineTo=function(){ … } 

    // called by jQuery when the user presses down the mousebutton 
    Tool.prototype.mousedown=function(e){ … } 

    // called by jQuery when the user moves the mouse 
    Tool.prototype.mouseup=function(e){ … }

此時，您的Tool類只是一個藍圖。要創建實際工具，請使用「新建」。這個實際的工具被稱爲對象。

var myTool=new Tool();

然後你就可以在myTool

// call the 「activate」 method/function on your new myTool object. 
    myTool.activate("brush");

使用任何方法（函數）下面是代碼和一個小提琴：http://jsfiddle.net/m1erickson/sTAve/

<!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;} 
    #brush_size,#color{ width:30px;} 
</style> 

<script> 
$(function(){ 

    // Note: every "this" refers to the tool 

    // make a generic tool that can work as either a brush or eraser 

    // first, set the properties that your tool has 
    function Tool(){ 
     var type="none"; 
     var mouseStart=false; 
     var x; 
     var y; 
     var lastX; 
     var lastY; 
    } 

    // second, add the methods (functions) that your tool 
    // these methods actually do the work 

    // tool.activate() 
    Tool.prototype.activate=function(newType){ 

     this.type=newType; 
     this.mouseStart=false; 

     // set your brush properties here 
     if(this.type=="brush"){ 
      context.globalCompositeOperation = "source-over"; 
     } 

     // set your eraser properties here 
     if(this.type=="eraser"){ 
      context.globalCompositeOperation = "destination-out"; 
      context.strokeStyle = "rgba(0,0,0,1)"; 
     } 

     console.log(this.type+": "+context.globalCompositeOperation); 
    } 

    //tool.startLine() 
    Tool.prototype.startLine=function(){ 
     this.lastX=this.x; 
     this.lastY=this.y; 
     context.lineCap = 'round'; 
     context.lineWidth = document.getElementById("brush_size").value; 
     if(this.type=="brush"){ 
      context.strokeStyle = document.getElementById('color').value; 
     } 
    console.log(context.strokeStyle); 
    } 

    // tool.drawLineTo() 
    Tool.prototype.drawLineTo=function(){ 
     context.beginPath(); 
     context.moveTo(this.lastX,this.lastY); 
     context.lineTo(this.x,this.y); 
     context.stroke();  
     this.lastX=this.x; 
     this.lastY=this.y; 
    //console.log(this.x+"/"+this.y+": "+this.mouseStart); 
    } 

    // tool.mousedown(e) 
    Tool.prototype.mousedown=function(e){ 
     this.setXY(e); 
     this.mouseStart = true; 
     this.startLine(this.x,this.y); 
    } 

    // tool.mousemove(e) 
    Tool.prototype.mousemove=function(e){ 
     if (this.mouseStart) { 
      this.setXY(e); 
      this.drawLineTo(this.x,this.y); 
     } 
    } 

    // tool.mouseup(e) 
    Tool.prototype.mouseup=function(e){ 
     if (this.mouseStart) { 
      this.setXY(e); 
      this.drawLine; 
      this.mouseStart = false; 
     } 
    } 

    // tool.setXY(e) 
    Tool.prototype.setXY=function(e){ 
     this.x=parseInt(e.clientX-offsetX); 
     this.y=parseInt(e.clientY-offsetY); 
    } 


    // get references to the canvas and it's context 
    var canvas=document.getElementById("canvas"); 
    var context=canvas.getContext("2d"); 

    // get the position of the canvas on the page 
    // (needed to calculate mouse position later) 
    var canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 

    // make a new tool 
    var myTool=new Tool(); 
    myTool.activate("brush"); 

    // set some defaults 
    document.getElementById("brush_size").value=15; 
    document.getElementById('color').value="green"; 


    // listen for events 

    $("#canvas").mousedown(function(e){myTool.mousedown(e);}); 
    $("#canvas").mousemove(function(e){myTool.mousemove(e);}); 
    $("#canvas").mouseup(function(e){myTool.mouseup(e);}); 

    $('#eraserTool').click(function(e){ myTool.activate("eraser"); }); 
    $('#brushTool').click(function(e){ myTool.activate("brush"); }); 



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

</head> 

<body> 
    <button id="brushTool">Brush</button> 
    <button id="eraserTool">Eraser</button> 
    <input id="brush_size" type="text" width=10> 
    <input id="color" type="text" width=10><br/> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

來源

2013-04-10 17:12:39 markE

+0

感謝您的詳細解釋和小提琴！幫助了我很多！ 我只是想知道，是否有可能在函數Tool（）之外聲明類方法而不使用原型？ – lifeisgood 2013-04-11 02:17:52

+0

嗯...添加到類原型的方式......你爲什麼不想這樣做的任何理由？你**可以**添加方法到你已經新建的工具對象，如下所示：var t = new Tool（）; t.addedFn = function（）{alert（「new」）; }; t.addedFn（）; [運行得很好！]。但是如果你想在你的工具類上創建**變體** - 比方說一個刷子是漸變而不是純色的工具類，那麼你應該檢查一下javascript類的「繼承」。 – markE 2013-04-11 04:24:25

+0

沒理由。我只是比較有和沒有原型的區別，因爲我對原型的使用有些模糊。 是的。我有添加漸變到畫筆的想法，但還沒有弄清楚如何。所以，謝謝你的開局。 – lifeisgood 2013-04-11 05:01:21

相關問題

 相關問題