我想借鉴使用鼠标事件JCanvas

我想借鉴使用JCanvas.Hre鼠标事件画布线条和矩形画布线条和矩形是我的代码我想借鉴使用鼠标事件JCanvas

<!DOCTYPE html> 
    <html> 
     <head> 
      <script type="text/javascript" src="http://code.jquery.com/jquery- 1.10.2.min.js"></script> 
      <script type="text/javascript" src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.js"></script> 
    </head> 
    <body> 
     <div id="tools">&nbsp; &nbsp; 
      <button id = "rectangle" type = "button"title="Rectangle"style="border:0;padding:0;"> 
       <img src="rect.jpg" width="40" height="30"/> 
      </button> 
      <button id = "line" type="button" title="Line" style="border:0;padding:0;"> 
       <img src="line.jpg" width="40" height="30" /> 
      </button> 
     </div> 
     <div id="sketch"> 
      <canvas id="paint"> 
      </canvas> 
     </div> 
     <script> 
      var tool = ' '; 
    $('#tools button').on('click', function() 
    { 
     tool = $(this).attr('id'); 
     console.log(tool); 
    }); 
    var canvas = document.getElementById('paint'); 
    var ctx = canvas.getContext('2d'); 
    var sketch = document.getElementById('sketch'); 
    var sketch_style = getComputedStyle(sketch); 
    canvas.width = parseInt(sketch_style.getPropertyValue('width')); 
    canvas.height = parseInt(sketch_style.getPropertyValue('height')); 
    var isText = false; 
    // Creating a tmp canvas 
    var tmp_canvas = document.createElement('canvas'); 
    var tmp_ctx = tmp_canvas.getContext('2d'); 
    tmp_canvas.id = 'tmp_canvas'; 
    tmp_canvas.width = canvas.width; 
    tmp_canvas.height = canvas.height; 
    sketch.appendChild(tmp_canvas); 
    var mouse = {x: 0, y: 0}; 
    var start_mouse = {x: 0, y: 0}; 
    var last_mouse = {x: 0, y: 0}; 
    if (tool == 'line') 
    { 
     $('canvas').draw({ 
      $('#line').click(function() 
      { 
       mousemove: function (e) 
       { 
        mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX; 
        mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY; 
       }, 
       mousedown: function (e) 
       { 
        mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX; 
        mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY; 
        start_mouse.x = mouse.x; 
        start_mouse.y = mouse.y; 
        canvas.addEventListener('mousemove',onLinePaint,false); 
        onLinePaint(); 
       }, 
       mouseup: function() 
       { 
        canvas.removeEventListener('mousemove',onLinePaint,false); 
        ctx.drawImage(canvas,0,0); 
        ctx.clearRect(0,0,canvas.width,canvas.height); 
       } 
      }); 
     }); 
    } 
    if (tool == 'rectangle') 
    { 

     $('canvas').draw({ 
      $('#rectangle').click(function() 
      { 
       mousemove: function (e) 
       { 
        mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX; 
        mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY; 
       }, 
       mousedown: function (e) 
       { 
        mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX; 
        mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY; 
        start_mouse.x = mouse.x; 
        start_mouse.y = mouse.y; 
        canvas.addEventListener('mousemove',onRectPaint,false); 
        onRectPaint(); 
       }, 
       mouseup: function() 
       { 
        canvas.removeEventListener('mousemove',onRectPaint,false); 
        ctx.drawImage(canvas,0,0); 
        ctx.clearRect(0,0,canvas.width,canvas.height); 
       } 
      }); 
     }); 
    } 
    var onLinePaint = function() 
    { 
     // Tmp canvas is always cleared up before drawing. 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.beginPath(); 
     ctx.moveTo(start_mouse.x, start_mouse.y); 
     ctx.lineTo(mouse.x, mouse.y); 
     ctx.stroke(); 
     ctx.closePath(); 
    }; 
    var onRectPaint = function() 
    { 
     // Tmp canvas is always cleared up before drawing. 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     var x = Math.min(mouse.x, start_mouse.x); 
     var y = Math.min(mouse.y, start_mouse.y); 
     var width = Math.abs(mouse.x - start_mouse.x); 
     var height = Math.abs(mouse.y - start_mouse.y); 
     ctx.strokeRect(x, y, width, height); 
    }; 
     </script> 
    </body> 
</html>

但我没有得到预期的产出。你能告诉我在上面的代码中我犯了什么错误吗？在此先感谢。

来源

2014-03-04 user3188826

的jQuery的链接不右看看我（空格） –

是啊这就是我们fine.Can使用临时画布在JCanvas中实施？ – user3188826

临时'画布'？我相信你的意思是一个不在DOM中的“canvas”节点，即使它没有附加到DOM上，你仍然可以在其上绘制。我从来没有使用JCanvas，但我确信它会起作用。只要确保将节点而不是查询字符串传递给'$'。 –

对不起，我不能写全的代码，但我相信，这可能是有益的

注：详见功能getImageData，putImageData

帆布

到将图像载入画布

var editor = document.getElementById("editor"), 
    context = editor.getContext("2d") , 

//create/load image to canvas 
image = $("<img/>", { 
        src : "img/man.png", 
        load : function() { 
         context.drawImage(this, 0, 0); 
        } 
     })

小鼠保持

检测小鼠保持

editor.onmousedown = function(){ 
    var clicking = true; 
    this.onmouseup = function(){ 
     clicking = false 
    } 
    this.onmousemove=function(e){ 

     if(!clicking) 
      return 

     //code goes here 
     var pos = findPos(this); 
    } 
}

查找位置

查找鼠标位置

function findPos(obj) { 
    var curleft = 0, curtop = 0; 
    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
     return { x: curleft, y: curtop }; 
    } 
    return undefined; 
}

线

function(fromX,fromY,toX,toY){ 
    // line from 
    ctx.moveTo(fromX,fromY); 

    // line to 
    ctx.lineTo(toX,toY); 

    // color 
    ctx.strokeStyle = "#4bf"; 

    // line width 
    ctx.lineWidth = 1; 

    // draw it 
    ctx.stroke(); 

}

矩形

// color 
ctx.fillStyle = "#FF0000"; 
// put coordinates to fill 
context.fillRect(20,20,150,100);

来源

2015-04-02 06:50:16

我想借鉴使用鼠标事件JCanvas

回答

相关问题