Question

我试图在画布上做一个抗锯齿绘图功能。感谢本网站上关于画布和别名的所有超级答案。

这是演示：https://jsfiddle.net/garciaVvV/eu34c8sy/12/

这里是js行：

function lineXY(mouseX, mouseY, mouseXX, mouseYY){
  var x0= mouseX;
  var y0= mouseY;
  var x1= mouseXX;
  var y1= mouseYY;

var coordinatesArray = [];
// Translate coordinates
// Define differences and error check
var dx = Math.abs(x1 - x0);
var dy = Math.abs(y1 - y0);
var sx = (x0 < x1) ? 1 : -1;
var sy = (y0 < y1) ? 1 : -1;
var err = dx - dy;
// Set first coordinates
coordinatesArray.push([x0,y0]);

// Main loop
while (!((x0 == x1) && (y0 == y1))) {
  var e2 = err << 1;
  if (e2 > -dy) {
    err -= dy;
    x0 += sx;
  }
  if (e2 < dx) {
    err += dx;
    y0 += sy;
  }
  // Set coordinates
coordinatesArray.push([x0,y0]);
  // Return the result
}

 for(var i=0;i<coordinatesArray.length;i++) {
   aliasedCircle(ctx, coordinatesArray[i][0], coordinatesArray[i][1], 100);
 }
}

用大笔快速绘制时是什么让它变得生涩？如何让它变甜？

由于

Answer 1

主要原因当然是生成了相当多的路径，首先是圆形，然后是线条，它再现圆形路径x每个像素的长度。

我们可以采取一些措施来改善这一点：

我们可以将圆圈缓存为图像并将其用作位图画笔。这消除了为线中的每个点重新生成圆中所有线的需要。只有在尺寸或颜色发生变化时才需要更新画笔。
我们不必绘制线的每个点，我们可以找到一种方法来计算在我们需要绘制之前可以跳过的像素数，但更好的选择是：
我们可以通过在第一个点和最后一个点之间画一条粗线来“欺骗”，而不是每个点画一个圆圈。
最后，我们可以在每个帧上注册鼠标而不是每个事件，以减少负载。

第一点很简单：只需创建画笔大小（直径）的画布外画布并绘制。要更改颜色，请重新生成画笔（或使用合成模式并在其上绘制）：

// show brush
document.body.appendChild(createBrush(150, "#09f"));

function createBrush(radius, color) {
  var ctx = document.createElement("canvas").getContext("2d");
  ctx.canvas.width = ctx.canvas.height = radius<<1; 
  ctx.fillStyle = color;            
  aliasedCircle(ctx, radius, radius, radius);
  ctx.fill();                  
  return ctx.canvas
}

function aliasedCircle(ctx, xc, yc, r) {   // NOTE: for fill only!
  var x = r, y = 0, cd = 0;

  // middle line
  ctx.rect(xc - x, yc, r<<1, 1);

  while (x > y) {
    cd -= (--x) - (++y);
    if (cd < 0) cd += x++;
    ctx.rect(xc - y, yc - x, y<<1, 1);  // upper 1/4
    ctx.rect(xc - x, yc - y, x<<1, 1);  // upper 2/4
    ctx.rect(xc - x, yc + y, x<<1, 1);  // lower 3/4
    ctx.rect(xc - y, yc + x, y<<1, 1);  // lower 4/4
  }
}

现在我们有了一个图像/位图画笔，我们可以看看如何画线。我们可以使用两种方法。既然你想要别名，我们必须以某种方式妥协。

在我们工作的环境中，使用Bresenham绘制和填充线条可能会非常慢。多次绘制圆圈的速度也很慢。

第三种选择是使用上下文自己的行并“破解”边缘（当然，如果所有这些都是为了改善填充桶的填充，参考上一个问题，我可能会花费精力来改善铲斗填充算法而不是:)）。

所以让我们试试第三个选项。我们既需要内部线路机制，也需要Bresenham。挑战在于让Bresenham完全覆盖边缘。

var ctx = c.getContext("2d");

drawLine(ctx, 60, 60, 250, 210, 50);
ctx.stroke();

function drawLine(ctx, x1, y1, x2, y2, radius) {
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineWidth = radius<<1;
  ctx.lineCap = "butt";
}

<canvas id=c height=300></canvas>

让我们添加 ~~Bresenham~~ ，实际上，让我们使用更快的线算法：EFLA并尝试匹配边缘 - 现在，这在所有情况下都可能并不完美和偏移（或者相反，本机绘制操作的线宽可能需要调整。

我们还需要计算两侧角度的90°偏移。而不是加减90°，我们可以转换cos / sin。

var ctx = c.getContext("2d");
var x1 = 60, y1 = 60, x2 = 250, y2 = 210, r = 50;

ctx.globalAlpha = 0.25;
drawLine(ctx, x1, y1, x2, y2, r);
ctx.stroke();
ctx.beginPath();
ctx.globalAlpha = 1;

// calc angle
var diffX = x2 - x1,
    diffY = y2 - y1,
    angle = Math.atan2(diffY, diffX);

// two edge lines offset per angle
var lx1 = x1 - r * Math.sin(angle),
    ly1 = y1 + r * Math.cos(angle),
    lx2 = x2 - r * Math.sin(angle),
    ly2 = y2 + r * Math.cos(angle),
    rx1 = x1 + r * Math.sin(angle),
    ry1 = y1 - r * Math.cos(angle),
    rx2 = x2 + r * Math.sin(angle),
    ry2 = y2 - r * Math.cos(angle);

fastLine(ctx, lx1|0, ly1|0, lx2|0, ly2|0);
fastLine(ctx, rx1|0, ry1|0, rx2|0, ry2|0);
ctx.fill();

function drawLine(ctx, x1, y1, x2, y2, radius) {
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineWidth = radius<<1;
  ctx.lineCap = "butt";
}

function fastLine(ctx, x1, y1, x2, y2) {
  var dlt, mul,
      sl = y2 - y1,
      ll = x2 - x1,
      yl = false,
      lls = ll >> 31,
      sls = sl >> 31,
      i;

  if ((sl ^ sls) - sls > (ll ^ lls) - lls) {
    sl ^= ll;
    ll ^= sl;
    sl ^= ll;
    yl = true
  }

  dlt = ll < 0 ? -1 : 1;
  mul = (ll === 0) ? sl : sl / ll;

  if (yl) {
    x1 += 0.5;
    for (i = 0; i !== ll; i += dlt)
      ctx.rect((x1 + i * mul)|0, y1 + i, 1, 1)
  }
  else {
    y1 += 0.5;
    for (i = 0; i !== ll; i += dlt)
      ctx.rect(x1 + i, (y1 + i * mul)|0, 1, 1)
  }
}

<canvas id=c height=300></canvas>

最后，如果我们合并组件并重构一点，我们会得到一个利用这些方法的整齐的别名线绘制机制：

var ctx = c.getContext("2d");
var x1 = 0, y1 = 0, r = 90;
var brush = createBrush(r, "#000");

document.querySelector("button").onclick = function() {
  ctx.beginPath();
  ctx.clearRect(0,0,c.width,c.height);
};

// mouse move handler using rAF.
c.onmousemove = function(e) {
  requestAnimationFrame(function() {
    var x2 = e.clientX|0, y2=e.clientY|0;
    aliasedLine(ctx, x1, y1, x2, y2, r);
    x1 = x2;
    y1 = y2;
  })
};

function aliasedLine(ctx, x1, y1, x2, y2, radius) {
  // calc angle
  var diffX = x2 - x1,
      diffY = y2 - y1,
      angle = Math.atan2(diffY, diffX),

      // two edge lines offset per angle
      lx1 = x1 - radius * Math.sin(angle),
      ly1 = y1 + radius * Math.cos(angle),
      lx2 = x2 - radius * Math.sin(angle),
      ly2 = y2 + radius * Math.cos(angle),
      rx1 = x1 + radius * Math.sin(angle),
      ry1 = y1 - radius * Math.cos(angle),
      rx2 = x2 + radius * Math.sin(angle),
      ry2 = y2 - radius * Math.cos(angle);

  // main line
  ctx.beginPath();
  drawLine(ctx, x1, y1, x2, y2, radius);
  ctx.stroke();
  
  // aliased edges
  ctx.beginPath();
  fastLine(ctx, lx1|0, ly1|0, lx2|0, ly2|0);
  fastLine(ctx, rx1|0, ry1|0, rx2|0, ry2|0);
  ctx.fill();

  // caps
  ctx.drawImage(brush, x1 - radius, y1 - radius)
  ctx.drawImage(brush, x2 - radius, y2 - radius)
}


function createBrush(radius, color) {
  var ctx = document.createElement("canvas").getContext("2d");
  ctx.canvas.width = ctx.canvas.height = 1 + radius<<1; 
  ctx.fillStyle = color;            
  aliasedCircle(ctx, radius, radius, radius);
  ctx.fill();                  
  return ctx.canvas
}

function aliasedCircle(ctx, xc, yc, r) {   // NOTE: for fill only!
  var x = r, y = 0, cd = 0;

  // middle line
  ctx.rect(xc - x, yc, r<<1, 1);

  while (x > y) {
    cd -= (--x) - (++y);
    if (cd < 0) cd += x++;
    ctx.rect(xc - y, yc - x, y<<1, 1);  // upper 1/4
    ctx.rect(xc - x, yc - y, x<<1, 1);  // upper 2/4
    ctx.rect(xc - x, yc + y, x<<1, 1);  // lower 3/4
    ctx.rect(xc - y, yc + x, y<<1, 1);  // lower 4/4
  }
}

function drawLine(ctx, x1, y1, x2, y2, radius) {
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineWidth = radius<<1;
}

function fastLine(ctx, x1, y1, x2, y2) {
  var dlt, mul,
      sl = y2 - y1,
      ll = x2 - x1,
      yl = false,
      lls = ll >> 31,
      sls = sl >> 31,
      i;

  if ((sl ^ sls) - sls > (ll ^ lls) - lls) {
    sl ^= ll;
    ll ^= sl;
    sl ^= ll;
    yl = true
  }

  dlt = ll < 0 ? -1 : 1;
  mul = (ll === 0) ? sl : sl / ll;

  if (yl) {
    x1 += 0.5;
    for (i = 0; i !== ll; i += dlt)
      ctx.rect((x1 + i * mul)|0, y1 + i, 1, 1)
  }
  else {
    y1 += 0.5;
    for (i = 0; i !== ll; i += dlt)
      ctx.rect(x1 + i, (y1 + i * mul)|0, 1, 1)
  }
}

#c {background:#aaa}

<canvas id=c width=1200 height=800></canvas>
<br><button>Clear</button>

最后的一些注意事项：请注意，它可能不是完美的，别名的，特别是在几乎0/90°的线条中。这是因为由于样本数量的原因，可以在很多点上形成一条精细的渐变线，EFLA线无法覆盖其单个像素点。

另一种方法是进行多边形填充（如scanline）实现。这是一个更多的数学和步骤，但可以接受的性能。

如何制作一个快速的非抗锯齿HTML5canvas基本绘图功能？

1 个答案: