5

目前我已经制作了一个铅笔工具并更改了铅笔颜色,但我想添加一个喷漆工具,它可以让您在画布上绘画并更改喷漆颜色。

这是我尝试实现的喷漆工具的 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);
}

你可以在这里看到完整的代码。

如果有人可以提供帮助,将不胜感激。

4

2 回答 2

3

这是我的尝试。添加了以下代码:

  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

于 2013-05-09T01:00:29.810 回答
3

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

在您的 HTML 中,您的选项值中有一些 javascript 代码。他们需要改成这样:

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

在 JS 中,我只是将您已经提供的代码片段移到了 spray 对象内。

//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);
    }
于 2013-05-09T00:27:26.917 回答