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/

enter image description here

<强>鼠标按下

设置isDown标志以指示用户正在拖动
保存拖动开始的“Y”位置

<强>鼠标松开

清除isDown标志以指示拖动已完成
保存两条平行线的“Y”位置加上当前颜色

<强>鼠标移动

绘制所有以前保存的平行线
绘制当前（临时）平行线

这是代码：

<!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>

在画布上添加不同的平行线

1 个答案: