0

だから私はブラシと消しゴムツールを持っています。私が抱えていた問題は、最初はキャンバスでスケッチできましたが、消しゴムに切り替えた後、ブラシを再度選択すると、消しゴムツールのままになります。if else を使用しようとしましたが、機能しませんでした。

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;
      }
    };
  }
4

1 に答える 1

0

JavaScript の「クラス」を使用していただきありがとうございます。

Tool クラスの作成方法は次のとおりです。

ツールをブラシまたは消しゴムとして機能させたいようです。そのため、ツール クラスには、現在のモード (ブラシ/消しゴム) を知るための「タイプ」変数が必要です。

    // create your Tool “class”
    function Tool(){

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

    }

Tool クラスに機能を追加する方法は次のとおりです (メソッドと呼ばれることが多いですが、実際には JavaScript 関数です)。

プロトタイプを使用して、「function Tool()」定義の外でクラス メソッドを宣言できます。このようにして、すべての 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 クラスは単なる設計図です。実際のツールを作成するには、「new」を使用します。この実際のツールはオブジェクトと呼ばれます。

    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-10T17:12:39.777 に答える