如何将图像像素的贝塞尔曲线生成预定义的形状

Question

我有这种类型的图像：

我有这个纹理：

我想生成这样的曲线，它应该适合领口形状。我尝试了这段代码但无法这样做。帮帮我

＆＃13;

＆＃13;

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*0.8/h;           // full circle / width of canvas
  var scale =250;                       // 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
  }
}

＆＃13;

canvas{
  transform:rotate(90deg)
}

＆＃13;

<canvas id=c></canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我已经将这种曲线实施到衣领结构中。步骤和比例值的一些变化，我得到了我的解决方案。

ld --verbose

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.3/w/2;        // full circle / width of canvas
  var scale =-180                    // 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
  }
}