如何在画布中将图像像素转换为 s 曲线形状

How to convert image pixel into s-curve shape in canvas(如何在画布中将图像像素转换为 s 曲线形状)

问题描述

我有这种类型的图像

我希望我们在图像中看到的直线(实际上是像素)应该被转换为 S 曲线.我已经使用画布及其属性实现了 C 型曲线，但无法做 S 型曲线.

I want that what we are seeing straight lines in image (actually which are pixel), it should get converted into the S-curve. I have implemented C-type of curve using canvas and its properties, but unable to do S-curve.

请帮帮我.

推荐答案

如果我理解正确，你希望每条垂直线都跟随一个S"吗?

If I understand you correctly you want each vertical line to follow a "S"?

如果是这种情况，您可以使用 f.ex.Math.sin() 结合 drawImage() 及其裁剪参数以按像素列对图像进行切片，同时根据 sin() 置换切片.

If that's the case you can use f.ex. Math.sin() combined with drawImage() and its clipping parameters to slice the image per pixel column while displacing the slice based on the sin().

关键公式是:

var step = Math.PI * 2 / w;

这会将一个完整的圆圈映射到画布的宽度，以便在到达终点时我们将回到起点，在这种情况下形成一条 S 曲线.

this maps a full circle to the width of the canvas so that when reaching the end we'll be back to the start point, in this case forming a S-curve.

var y = Math.sin(step * x) * scale;

这会根据之前计算的步长值计算 y 轴上的位移，现在与 x 位置相关联.这会产生一个介于 -1 和 1 之间的值，因此我们需要将其放大.比例表示以像素数为单位的最大半径.

This calculates the displacement on y-axis based on the previously calculated step value, now linked to x position. This produces a value between -1 and 1, so we need to scale it up. Scale represents maximum radius in number of pixels.

var ctx = c.getContext("2d");           // just some inits for demo
var img = new Image;
img.onload = slice;
img.src = "//i.stack.imgur.com/UvqUP.gif";

function slice() {
  var w = c.width = this.width;
  var h = c.height = this.height;
  var step = Math.PI * 2 / w;           // full circle / width of canvas
  var scale = 75;                       // max displacement on y
  
  for(var x = 0; x < w; x++) {
    ctx.drawImage(this,
      x, 0, 1, h,                       // source line from image
      x, Math.sin(step*x)*scale, 1, h); // displaced line
  }
}

<canvas id=c></canvas>

在 x 轴上(在这种情况下显然不那么明显，因为变化发生在线条上，并且还有其他方法可以使用，例如在每一端使用 s 形过度绘制):

On the x-axis (obviously not as visible in this case since the changes happens along the lines and there are other methods that could be used such as over-drawing with an s-shape at each end):

var ctx = c.getContext("2d");           // just some inits for demo
var img = new Image;
img.onload = slice;
img.src = "//i.stack.imgur.com/UvqUP.gif";

function slice() {
  var w = c.width = this.width;
  var h = c.height = this.height;
  var step = Math.PI * 2 / h;           // full circle / width of canvas
  var scale = 75;                       // max displacement on y
  
  for(var y = 0; y < h; y++) {
    ctx.drawImage(this,
      0, y, w, 1,                       // source line from image
      Math.sin(step*y)*scale, y, w, 1); // displaced line
  }
}

<canvas id=c></canvas>

这篇关于如何在画布中将图像像素转换为 s 曲线形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！