画软刷 [英] Drawing soft brush

问题描述

我正在尝试在HTML5中创建一个平滑的画笔，下面是一个例子。

I'm trying to create a smooth brush in HTML5, an example is below.

这是我尝试的，它是一些东西。但它不如上图所示。

This is what I tried, it's something. But it's not as smooth as the image above.

Editor.Drawing.Context.globalAlpha = 0.3;
var amount = 3;

for(var t = -amount; t <= amount; t += 3) {
    for(var n = -amount; n <= amount; n += 3) {
        Editor.Drawing.Context.drawImage(Editor.Drawing.ClipCanvas, -(n-1), -(t-1));
    }
}

它看起来像这样。

推荐答案

使用画笔

选择画笔，这可以是带预定义画笔的图像，也可以使用离屏画布制作一个并在其中绘制径向渐变。为简单起见，我制作了一个简单的图像画笔，如：

Using brushes

Choose a brush, this can be an image with predefined brushes or you can make one using an off-screen canvas and draw a radial gradient into it. For simplicity I made a simple image brush such as these:

然后对于绘制到画布的每个新点：

Then for each new point drawn to the canvas:

• 计算前一点和当前点之间的差异


• 计算线的长度，以便我们可以使用与长度无关的绝对步长值


• 使用标准化值和先前计算的步长值迭代长度

步长值可以是任何值因此看起来很好 - 它很大程度上取决于刷子的平滑度以及它的一般尺寸（更光滑的刷子需要更小的步骤才能相互融合）。

The step value can be anything that looks good as a result - it largely depends on the smoothness of the brush as well as its general size (smoother brushes will require smaller steps to blend into each other).

对于这个演示，我使用了画笔宽度，使用的值越小，沿着画线绘制的画笔就越多，n更糟糕的结果，但也可能减慢程序速度，因此找到一个会影响质量和速度的价值。

For this demo I used brush-width, the smaller values that are used, the more brushes will be drawn along the line, nicer result, but can also slow down the program, so find a value that compromises quality and speed.

例如：

每次在绘图时注册新点时都会调用：

This will be called every time a new point is registered when drawing:

function brushLine(ctx, x1, y1, x2, y2) {

    var diffX = Math.abs(x2 - x1),                       // calc diffs
        diffY = Math.abs(y2 - y1),
        dist = Math.sqrt(diffX * diffX + diffY * diffY), // find length
        step = 20 / (dist ? dist : 1),                   // "resolution"
        i = 0,                                           // iterator for length
        t = 0,                                           // t [0, 1]
        b, x, y;

    while (i <= dist) {
      t = Math.max(0, Math.min(1, i / dist));
      x = x1 + (x2 - x1) * t;
      y = y1 + (y2 - y1) * t;
      b = (Math.random() * 3) | 0;
      ctx.drawImage(brush, x - bw * 0.5, y - bh * 0.5);  // draw brush
      i += step;
    }
}

演示

Demo

var brush = new Image();
brush.onload = ready;
brush.src = "//i.stack.imgur.com/HsbVA.png";

function ready() {

  var c = document.querySelector("canvas"),
      ctx = c.getContext("2d"),
      isDown = false, px, py, 
      bw = this.width, bh = this.height;

  c.onmousedown = c.ontouchstart = function(e) {
    isDown = true;
    var pos = getPos(e);
    px = pos.x;
    py = pos.y;
  };

  window.onmousemove = window.ontouchmove = function(e) {
    if (isDown) draw(e);
  };

  window.onmouseup = window.ontouchend = function(e) {
    e.preventDefault();
    isDown = false
  };

  function getPos(e) {
    e.preventDefault();
    if (e.touches) e = e.touches[0];
    var r = c.getBoundingClientRect();
    return {
      x: e.clientX - r.left,
      y: e.clientY - r.top
    }
  }

  function draw(e) {
    var pos = getPos(e);
    brushLine(ctx, px, py, pos.x, pos.y);
    px = pos.x;
    py = pos.y;
  }

  function brushLine(ctx, x1, y1, x2, y2) {

    var diffX = Math.abs(x2 - x1),
      diffY = Math.abs(y2 - y1),
      dist = Math.sqrt(diffX * diffX + diffY * diffY),
      step = bw / (dist ? dist : 1),
      i = 0,
      t = 0,
      b, x, y;

    while (i <= dist) {
      t = Math.max(0, Math.min(1, i / dist));
      x = x1 + (x2 - x1) * t;
      y = y1 + (y2 - y1) * t;
      b = (Math.random() * 3) | 0;
      ctx.drawImage(brush, x - bw * 0.5, y - bh * 0.5);
      i += step
    }
  }
}

body {background: #777}
canvas {background: #fff;cursor:crosshair}

<canvas width=630 height=500></canvas>

您可以使用此技术来模拟各种画笔。

You can use this technique to simulate a variety of brushes.

提示：通过小修改，您还可以根据速度变化宽度以增加真实感（不是显示）。

Tip: with a small modification you can also variate the width depending on velocity to increase realism (not shown).

这篇关于画软刷的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！