Question

我想在绘制矩形时添加垂直线条。行数取决于用户，可以从文本框中读取。

我知道逻辑，但不知怎的，我无法得到答案。我正在计算矩形的宽度，然后在没有垂直线的基础上跳过宽度。单击矩形附近的复选框并使用鼠标按下事件进行绘制请让我知道我哪里出错了。

      function PlotPitch()
  {
    var iPatches = document.getElementById('txtPatchCount').value;

    var iTop =  mySel.y;
    var iBottom = mySel.y + mySel.h;
    var iLeft =  mySel.x;
    var iX = iLeft;
    canvas = document.getElementById('canvas2');
    context =  canvas.getContext('2d');
    for (var iPatch=1; iPatch<iPatches; ++iPatch) {
      iX = iLeft + iPatch*mySel.w/iPatches;
      context.moveTo(iX, iTop);
      context.lineTo(iX, iBottom);
    }
    context.lineWidth=0.25;
    context.stroke();
  }

http://jsfiddle.net/K5wcs/4/ 如果我添加这个代码是破坏的，我无法绘制任何东西。

Answer 1

如果你有'奇怪'的行为，你应该做的就是分开关注点，所以在这种情况下可以通过创建一个你单独测试的函数来绘制线条，然后一旦测试好了，就把它插入代码中只需调用该函数。你应该很快找到。
首先测试一下：

function drawLines(Context, mySel, iPatches) {
   var iTop =  mySel.y;
   var iBottom = mySel.y + mySel.h;
   var iLeft =  mySel.x;
   var iX = iLeft;
   var colWidth = mySel.w/iPatches ;
   for (var iPatch=1; iPatch<iPatches; ++iPatch) {
      iX += colWidth;
      Context.moveTo(iX, iTop);
      Context.lineTo(iX, iBottom);
   }
   Context.lineWidth=0.25;
   Context.stroke();
}

祝你好运。

如何在矩形中添加垂直平行线？

1 个答案: