キャンバス描画用のjavascriptの2つの関数との競合

Question

キャンバス上に自由描画と線画を描画するために2つの異なる関数が使用されています。しかし、関数が呼び出されたときに、他の関数が正しく動作していない。線描画関数が最初に呼び出され、ボタンを押して描画をフリーにすると線も描画されます。反対の場合、連続線が描画されます。この2つの関数を以下に示します。ラインDrwawing 機能ライン（）{ VARキャンバス、 コンテキスト、 ドラッグ=偽、 dragStartLocation、 スナップショットフリー描画用

function free(){ 
    var canvas=document.getElementById('canvas'); 
    var radius=10; 
    var dragging1=false; 


    context.lineWidth=2*radius; 

    var putPoint=function(e) { 
    if(dragging1){ 
    context.lineTo(e.clientX,e.clientY); 
    context.stroke(); 
    context.beginPath(); 
    context.arc(e.clientX,e.clientY,radius,0,Math.PI*2); 
    context.fill(); 
    context.beginPath(); 
    context.moveTo(e.clientX,e.clientY); 
    }//end of if 
} 

var engage = function(e) { 
    dragging1=true; 
    putPoint(e); 
} 

var disengage = function() { 
    dragging1=false; 
    context.beginPath(); 
} 
canvas.addEventListener('mousedown',engage); 
canvas.addEventListener('mousemove',putPoint); 
canvas.addEventListener('mouseup',disengage); 
} 

。

function getCanvasCoordinates(event) { 
    var x = event.clientX - canvas.getBoundingClientRect().left, 
     y = event.clientY - canvas.getBoundingClientRect().top; 

    return {x: x, y: y}; 
} 

function takeSnapshot() { 
    snapshot = context.getImageData(0, 0, canvas.width, canvas.height); 
} 

function restoreSnapshot() { 
    context.putImageData(snapshot, 0, 0); 
} 


function drawLine(position) { 
    context.beginPath(); 
    context.moveTo(dragStartLocation.x, dragStartLocation.y); 
    context.lineTo(position.x, position.y); 
    context.stroke(); 
} 

function dragStart(event) { 
    dragging = true; 
    dragStartLocation = getCanvasCoordinates(event); 
    takeSnapshot(); 
} 

function drag(event) { 
    var position; 
    if (dragging === true) { 
     restoreSnapshot(); 
     position = getCanvasCoordinates(event); 
     drawLine(position); 
    } 
} 

function dragStop(event) { 
    dragging = false; 
    restoreSnapshot(); 
    var position = getCanvasCoordinates(event); 
    drawLine(position); 
} 

function init() { 
    canvas = document.getElementById("canvas"); 
    context = canvas.getContext('2d'); 
    context.strokeStyle = 'purple'; 
    context.lineWidth = 6; 
    context.lineCap = 'round'; 

    canvas.addEventListener('mousedown', dragStart, false); 
    canvas.addEventListener('mousemove', drag, false); 
    canvas.addEventListener('mouseup', dragStop, false); 
} 
init() 
} 

どうすれば解決できますか？ Iamはこの時点で立ち往生しています。

Answer 1

この場合、他の機能でイベントリスナーを削除する2つの関数を作成してください。それが機能するために作成すること

function removeLineListeners(){ 
     canvas.removeEventListener('mousedown', dragStart); 
     canvas.removeEventListener('mousemove', drag); 
     canvas.removeEventListener('mouseup', dragStop); 
    } 

と

function removeFreeListeners(){ 
     canvas.removeEventListener('mousedown',engage,false); 
     canvas.removeEventListener('mousemove',putPoint,false); 
     canvas.removeEventListener('mouseup',disengage,false); 
    } 

だから、ときライン機能のstrtingに（）無料と removeFreeListenersの開始に（）removeLineListenersを追加するとき。これは私のために働いた