Добавить различные параллельные линии на холсте

Question

Я пытаюсь добавить разные слои (например, две параллельные линии к холсту). Я реализовал код с одной парой параллельных линий одного цвета. Теперь мне нужно добавить разные цветовые линии, не удаляя предыдущие строки. Прикреплено js скрипка. Пожалуйста помоги. После нажатия слоев. вы можете рисовать слои на холсте.

var oImageBuffer = document.createElement('img'); 
    var oCanvas=document.getElementById("SetupImageCanvas"); 
    var o2DContext=oCanvas.getContext("2d"); 
    var oRect = {}; 
    var oROI = {}; 
    var oLayers = new Array(); 
    var bDragging = false; 
    var bSetROI = false; 
    var bSetLayers = false; 
    InitMouseEvents(); 
    var oSelect = document.getElementById("ImageList"); 
    oSelect.onchange=function() { 
    changeCanvasImage(oSelect[oSelect.selectedIndex].value); 
    } 


    // Canvas event handlers (listeners). 
    function InitMouseEvents() { 
    oCanvas.addEventListener('mousedown', MouseDownEvent, false); 
    oCanvas.addEventListener('mouseup', MouseUpEvent, false); 
    oCanvas.addEventListener('mousemove', MouseMoveEvent, false); 
    oCanvas.addEventListener('mouseout', MouseOutEvent, false); 
    } 
    function MouseDownEvent(e) { 
    oRect.startX = e.pageX - this.offsetLeft; 
    oRect.startY = e.pageY - this.offsetTop; 
    bDragging = true; 
    } 
    function MouseUpEvent() { 
    bDragging = false; 
    } 
    function MouseOutEvent() { 
    document.getElementById("MouseCoords").innerHTML=""; 
    } 
    function MouseMoveEvent(e) { 
    if (bDragging) { 
     oRect.w = (e.pageX - this.offsetLeft) - oRect.startX; 
     oRect.h = (e.pageY - this.offsetTop) - oRect.startY; 
     oCanvas.getContext('2d').clearRect(0,0,oCanvas.width, oCanvas.height); 
     var oROI = document.getElementById("btnROI"); 
     if (oROI.checked) { 
     SetROI(); 
     } 
     var oLayer = document.getElementById("btnLAYER"); 
     if (oLayer.checked) { 
     SetLayer(); 
     } 
    } 

    if (bSetROI) { 
     DrawROI(); 
    } 
    if (bSetLayers) { 
     DrawLayers(); 
    } 
    // Display the current mouse coordinates. 
    ShowCoordinates(e); 
    } 

    function ShowCoordinates(e) { 
    x=e.clientX; 
    y=e.clientY; 
    document.getElementById("MouseCoords").innerHTML="(" + x + "," + y + ") " + document.getElementById('txtPatchCount').value; 
    } 

    // Interactively draw ROI rectangle(s) on the canvas. 
    function SetROI() { 
    bSetROI = true; 
    oROI.startX = oRect.startX; 
    oROI.startY = oRect.startY; 
    oROI.w = oRect.w; 
    oROI.h = oRect.h;  
    } 
    function DrawROI() { 
    o2DContext.lineWidth=1.5; 
    o2DContext.strokeStyle = '#0F0'; 
    o2DContext.strokeRect(oROI.startX, oROI.startY, oROI.w, oROI.h); 

    var iPatches = document.getElementById('txtPatchCount').value; 
    o2DContext.beginPath(); 
    var iTop = oROI.startY; 
    var iBottom = oROI.startY + oROI.h; 
    var iLeft = oROI.startX; 
    var iX = iLeft; 
    for (var iPatch=1; iPatch<iPatches; ++iPatch) { 
     iX = iLeft + iPatch*oROI.w/iPatches; 
     o2DContext.moveTo(iX, iTop); 
     o2DContext.lineTo(iX, iBottom); 
    } 
    o2DContext.lineWidth=0.25; 
    o2DContext.stroke(); 
    } 

    // Interactively draw layer boundaries on the canvas. 
    function SetLayer() { 
    bSetLayers = true; 
    oLayers.length = 0; 
    oLayers.push(oRect.startY); 
    oLayers.push(oRect.startY + oRect.h); 
    } 
    function DrawLayers() { 
    o2DContext.lineWidth=0.25; 
    o2DContext.strokeStyle = '#F00'; 

    o2DContext.beginPath(); 
    var iY = oLayers[0]; 
    var iLeft = 0; 
    var iRight = oCanvas.width; 
    for (var iLayer=0; iLayer<oLayers.length; ++iLayer) { 
     iY = oLayers[iLayer]; 
     o2DContext.moveTo(iLeft, iY); 
     o2DContext.lineTo(iRight, iY); 
     o2DContext.stroke(); 
    } 
    } 

http://jsfiddle.net/AhdJr/30/

Answer 1

Создание массива, чтобы сохранить каждый новый слой и нарисуйте все сохраненные слои.

Демо: http://jsfiddle.net/m1erickson/UfuDX/

MouseDown

• установить флаг isDown, чтобы указать, что пользователь тащит
• сохранить положение "Y", где сопротивление начал

MouseUp

• ясно флаг isDown, чтобы указать сопротивление завершил
• Сохранить "Y" позиции обеих параллельных линий плюс текущий цвет

MouseMove

• нарисовать все ранее сохраненные параллельные линии
• обратить текущий (временный) параллельную линию

Вот код:

<!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 canvasOffset=$("#canvas").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 
    var isDown=false; 
    var startY; 

    var layers=[]; 
    var currentColor="black"; 

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

    function handleMouseUp(e){ 
     e.preventDefault(); 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 
     isDown=false; 
     layers.push({y1:startY,y2:mouseY,color:currentColor}); 
    } 

    function handleMouseOut(e){ 
     e.preventDefault(); 
     mouseX=parseInt(e.clientX-offsetX); 
     mouseY=parseInt(e.clientY-offsetY); 
     isDown=false; 
     layers.push({y1:startY,y2:mouseY,color:currentColor}); 
    } 

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

    function drawAll(){ 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     for(var i=0;i<layers.length;i++){ 
      layer=layers[i]; 
      hLine(layer.y1,layer.color); 
      hLine(layer.y2,layer.color); 
     } 
    } 

    function hLine(y,color){ 
     ctx.beginPath(); 
     ctx.moveTo(0,y); 
     ctx.lineTo(canvas.width,y); 
     ctx.strokeStyle=color; 
     ctx.stroke(); 
    } 

    function randomColor(){ 
     return('#'+Math.floor(Math.random()*16777215).toString(16)); 
    } 

    $("#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>