Я пытаюсь нарисовать линию на холсте с помощью событий мыши

Я пытаюсь нарисовать линию на холсте, используя mousedown, mousemove, mouseup события, но я не могу установить координаты для рисования линии на холсте. Здесь я использую следующий код JavaScript:Я пытаюсь нарисовать линию на холсте с помощью событий мыши

function line() 
{ 
    canvas = document.getElementById("drawingCanvas"); 
    context = canvas.getContext("2d"); 
    canvas.onmousedown = startLine; 
    canvas.onmouseup = drawLine; 
    canvas.onmouseout = stopLine; 
    //canvas.onmousemove =drawLine; 
}; 

function startLine(e) 
{ 
    isLine = true; 
    context.beginPath(); 
    context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop); 

} 

function drawLine(e) 
{ 
    if (isLine==true) 
    { 
     var x = e.pageX - canvas.offsetLeft; 
     var y = e.pageY - canvas.offsetTop; 
     context.lineTo(x ,y); 
     context.stroke(); 
     context.closePath(); 
    } 
    cPush(); 
} 
function stopLine() 
{ 
    isLine = false; 
}

Когда я использую mousemove событие для drawLine() метода он рисует несколько строк. Можете ли вы рассказать мне, что неправильно в моем коде?

источник

2014-01-31 user3188826

В чем же проблема? Когда я пытаюсь это сделать (добавление в вызов 'line();' и удаление таинственного 'cPush();'), похоже, работает нормально. – david

В принципе, вам нужно реорганизовать свой код, чтобы сделать beginPath + moveTo + lineTo + stroke внутри mousemove.

В противном случае вы получите эти несколько строк ...

В MouseDown: Спасите StartX/startY и установить флаг isDown, чтобы указать сопротивление начал:

function handleMouseDown(e){ 
    e.preventDefault(); 
    startX=parseInt(e.clientX-offsetX); 
    startY=parseInt(e.clientY-offsetY); 
    isDown=true; 
}

В MouseMove : рисовать новую линию от StartX/Y, чтобы mouseX/Y и сброса StartX/Y = Y/mouseX

function handleMouseMove(e){ 
    if(!isDown){return;} 
    e.preventDefault(); 

    mouseX=parseInt(e.clientX-offsetX); 
    mouseY=parseInt(e.clientY-offsetY); 

    ctx.beginPath(); // use beginPath for every segment of the line 
    ctx.moveTo(startX,startY); 
    ctx.lineTo(mouseX,mouseY); 
    ctx.stroke(); 
    startX=mouseX; 
    startY=mouseY; 
}

В MouseUp: Сбросьте isDown флаг, чтобы указать сопротивление закончилось:

function handleMouseUp(e){ 
    e.preventDefault(); 
    isDown=false; 
}

Вот код и Fiddle: http://jsfiddle.net/m1erickson/hzNg4/

<!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;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var $canvas=$("#canvas"); 
    var canvasOffset=$canvas.offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 
    var scrollX=$canvas.scrollLeft(); 
    var scrollY=$canvas.scrollTop(); 

    var isDown=false; 
    var startX; 
    var startY; 


    function handleMouseDown(e){ 
     e.preventDefault(); 
     startX=parseInt(e.clientX-offsetX); 
     startY=parseInt(e.clientY-offsetY); 
     isDown=true; 
    } 

    function handleMouseUp(e){ 
     e.preventDefault(); 
     isDown=false; 
    } 

    function handleMouseOut(e){ 
     e.preventDefault(); 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 
     isDown=false; 
    } 

    function handleMouseMove(e){ 
     if(!isDown){return;} 
     e.preventDefault(); 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 

     // Put your mousemove stuff here 
     ctx.beginPath(); 
     ctx.moveTo(startX,startY); 
     ctx.lineTo(mouseX,mouseY); 
     ctx.stroke(); 
     startX=mouseX; 
     startY=mouseY; 

    } 

    $("#canvas").mousedown(function(e){handleMouseDown(e);}); 
    $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
    $("#canvas").mouseup(function(e){handleMouseUp(e);}); 
    $("#canvas").mouseout(function(e){handleMouseOut(e);}); 



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

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

источник

2014-01-31 05:21:52 markE

Попробуйте этот путь (DEMO):

function line() { 
    canvas = document.getElementById("drawingCanvas"); 
    context = canvas.getContext("2d"); 
    canvas.onmousedown = startLine; 
    canvas.onmouseup = canvas.onmouseout = stopLine; 
    canvas.onmousemove = drawLine; 
}; 

function startLine(e) { 
    isLine = true; 
    context.beginPath(); 
    context.moveTo(startX = (e.pageX - canvas.offsetLeft), 
    startY = (e.pageY - canvas.offsetTop)); 
} 

function drawLine(e) { 
    if (isLine) { 
     var x = e.pageX - canvas.offsetLeft; 
     var y = e.pageY - canvas.offsetTop; 
     context.clearRect(0, 0, 300, 150); // width = 300, height = 150 
     context.beginPath(); 
     context.moveTo(startX, startY); 
     context.lineTo(x, y); 
     context.stroke(); 
     context.closePath(); 
    } 
    //cPush(); 
} 

function stopLine() { 
    isLine = false; 
}

источник

2014-01-31 05:27:33 loxxy

Я пытаюсь нарисовать линию на холсте с помощью событий мыши

ответ

Смежные вопросы