html5キャンバス用スプレーペイントツールの追加方法？

Question

現在、私は鉛筆ツールを作って鉛筆の色を変更しましたが、私はキャンバスに描画してスプレーペイントの色を変更するスプレーペイントツールを追加したいと思います。

これは私が実装しようとしたスプレー塗装ツールのJavaScriptの一部ですが、動作させることはできません。

//spray paint tool 
tools.spray = function() { 

    var tool = this; 
    this.started = false; 

    this.mousedown = function (ev) { 

    if (!tool.started) { 
     return; 
    } 

    var len = 5 + (Math.random() * 5 | 0); 

    for(var i = 0; i < len; ++i) { 
     context.beginPath(); 
     context.strokeStyle = CurrentColor; 

     context.arc(
     mouseX + Math.cos(Math.random() * Math.PI * 2) * radius * Math.random(), 
     mouseY + Math.sin(Math.random() * Math.PI * 2) * radius * Math.random(), 
     1, 
     0, Math.PI * 2, false 
    ); 

     context.fill(); 
    } 
    }, 33); 
} 

完全コードhereが表示されます。

誰かがそれを助けることができれば、それは最も感謝します。あなたのHTMLで

Answer 1

http://jsbin.com/urubev/9/edit

あなたのオプション値にいくつかのJavaScriptコードを持っていました。

<select id="dtool"> 
    <option value="pencil">Pencil</option> 
    <option value="spray">Spray</option> 
</select> 

JSで、スプレーオブジェクトの内部に既に用意されているコードスニペットを移動しました。

//These are the variables used throughout the javascript 
//var points = new Array(); 
var outlineImage = new Image(); 
radius = 15 
var colorPurple = "#cb3594"; //variable for purple colour 
var colorGreen = "#659b41"; //variable for green colour 
var colorYellow = "#ffcf33";//variable for yellow colour 
var colorBlack = "#000000";//variable for black colour 
var CurrentColor = colorBlack; //variable for current colour 

//used to change the colour of the drawing tool 
function changeColor(color_code) { 
    CurrentColor =color_code; 
} 


//this function will allow you clear the canvas 
function clearCanvas(){ 
context.clearRect(0, 0, canvas.width, canvas.height); 
} 

if (window.addEventListener) { 
    window.addEventListener('load', function() { 
     var canvas, context; 

      // The active tool instance. 
      var tool; 
      var tool_default = 'spray'; 

     function init() { 
      // Find the canvas element. 
      canvas = document.getElementById('imageView');//this is used to get a element id for 'imageView' the cnavas 
      if (!canvas) { 
       alert('Error: I cannot find the canvas element!');//if it fails to get the canvas then it will diplay this error 
       return; 
      } 

      if (!canvas.getContext) { 
       alert('Error: no canvas.getContext!');//if it fails to get the context then it will diplay this error 
       return; 
      } 


      // Get the 2D canvas context. 
      context = canvas.getContext('2d');// used to get canavs context to '2d' 
      if (!context) { 
       alert('Error: failed to getContext!');//if it fails to get the context then it will diplay this error 
       return; 
      } 

     // Get the tool select input. 
    var tool_select = document.getElementById('dtool'); 
    if (!tool_select) { 
     alert('Error: failed to get the dtool element!'); 
     return; 
    } 
    tool_select.addEventListener('change', ev_tool_change, false); 

    // Activate the default tool. 
    if (tools[tool_default]) { 
     tool = new tools[tool_default](); 
     tool_select.value = tool_default; 
    } 

      // Attach the mousedown, mousemove and mouseup event listeners. 
      canvas.addEventListener('mousedown', ev_canvas, false); 
      canvas.addEventListener('mousemove', ev_canvas, false); 
      canvas.addEventListener('mouseup', ev_canvas, false); 
     } 

// The event handler for any changes made to the tool selector. 
    function ev_tool_change (ev) { 
    if (tools[this.value]) { 
     tool = new tools[this.value](); 
    } 
    } 

    // This object holds the implementation of each drawing tool. 
    var tools = {}; 

     // This painting tool works like a drawing pencil which tracks the mouse 
     // movements. 
     tools.pencil = function() { 
      var tool = this; 
      this.started = false; 

      // This is called when you start holding down the mouse button. 
      // This starts the pencil drawing. 
      this.mousedown = function (ev) { 
       context.beginPath(); 
       context.strokeStyle = CurrentColor; 
       context.moveTo(ev._x, ev._y); 
       tool.started = true; 
      }; 

      // This function is called every time you move the mouse. Obviously, it only 
      // draws if the tool.started state is set to true (when you are holding down 
      // the mouse button). 
      this.mousemove = function (ev) { 
       if (tool.started) { 
        context.strokeStyle = CurrentColor; 
        context.lineTo(ev._x, ev._y);     
        context.stroke(); 
       } 
      }; 

      // This is called when you release the mouse button. 
      this.mouseup = function (ev) { 
       if (tool.started) { 
        tool.mousemove(ev); 
        tool.started = false; 
       } 
      }; 
     } 

     tools.spray = function() { 
      var tool = this; 
      this.started = false; 

      this.mousedown = function (ev) { 
       context.beginPath(); 
       context.strokeStyle = CurrentColor; 
       context.moveTo(ev._x, ev._y); 
       tool.started = true; 
      }; 

      this.mousemove = function (ev) { 
       if (tool.started) { 
        context.strokeStyle = CurrentColor; 

        context.arc(
         ev._x + Math.cos(Math.random() * Math.PI * 2) * radius * Math.random(), 
         ev._y + Math.sin(Math.random() * Math.PI * 2) * radius * Math.random(), 
         1, 
         0, Math.PI * 2, false 
        ); 
        context.fill(); 
       } 
      }; 

      this.mouseup = function (ev) { 
       if (tool.started) { 
        tool.mousemove(ev); 
        tool.started = false; 
       } 
      }; 
     }   

     // The general-purpose event handler. This function just determines the mouse 
     // position relative to the canvas element. 
     function ev_canvas(ev) { 
      if (navigator.appName == 'Microsoft Internet Explorer' || navigator.vendor == 'Google Inc.' || navigator.vendor == 'Apple Computer, Inc.') { // IE or Chrome 
       ev._x = ev.offsetX; 
       ev._y = ev.offsetY; 
      } else if (ev.layerX || ev.layerX == 0) { // Firefox 
       ev._x = ev.layerX - this.offsetLeft; 
       ev._y = ev.layerY - this.offsetTop; 
      } else if (ev.offsetX || ev.offsetX == 0) { // Opera 
       ev._x = ev.offsetX; 
       ev._y = ev.offsetY; 
      } 
      // Call the event handler of the tool. 
      var func = tool[ev.type]; 
      if (func) { 
       func(ev); 
      } 
      // points.push(ev); 
     } 

     init(); 

    }, false); 
    } 

Answer 2

これは私の試みです。次のコードを追加しました：

tools.spray = function(){}; 
    tools.spray.prototype = new tools.pencil(); 
    tools.spray.prototype.mousemove = function (ev) { 
    if (tool.started) { 
     context.fillStyle = CurrentColor; 
     context.rect(ev._x, ev._y, 1, 1);  

     for (var i = 20; i--;) { 
     context.rect(ev._x + Math.random() * 20 - 10, 
        ev._y + Math.random() * 20 - 10, 1, 1); 
     context.fill(); 
     } 

    } 
    }; 

---

まずのみmousemove機能が異なるので、私たちは、「鉛筆」ツールを拡張します。これを行うには、鉛筆ツールのインスタンスを作成し、それをsprayコンストラクタ関数のプロトタイプとして使用します。上記のように、mousemove関数を上書きします。

ロジックは非常に単純ですが、マウスの周りの正方形の領域に20ドットを作成するだけです。元のコードのように丸い領域を使用し、ユーザーがマジックナンバー（20とrand（20）〜10）を使用する代わりにいくつかのパラメーターを設定できるようにする方がよいでしょう。しかし、単純化のために、それはそれである。他の回答で述べたように

---

、そのように変更するのに必要なオプション：

<option value="pencil">Pencil</option> 
    <option value="spray">Spray</option> 

---

ここでは楽しみのためだけに、あまりにもクール有刺鉄線のことです。

tools.barb = function(){}; 
    tools.barb.prototype = new tools.pencil(); 
    tools.barb.prototype.mousemove = function (ev) { 
    if (tool.started) { 
     context.strokeStyle = CurrentColor; 
     context.lineTo(ev._x, ev._y);   
     context.lineTo(ev._x + Math.random() * 20 - 10, 
        ev._y + Math.random() * 20 - 10);    
     context.stroke(); 
    } 
    }; 

http://jsbin.com/awiyan/3/edit