如何将图像像素转换为）|（ - 画布中的曲线形状 [英] How to convert image pixel into )|( -curve shape in canvas

问题描述

我有以下图案的图片：

我想将图像中的直线转换为a）|（shape，我已经使用canvas及其属性实现了C型和S型曲线，但我无法做到）|（-curve）。

我该怎么做？ 您可以修改稍微有一点我的以前的回答，并有将宽度（或高度）上的sin范围减半为偏移量，然后取这个偏移量x 2并从新行的总高度中减去。

会发生什么sin（）函数将接受一个输入并产生一个在[0.0，1.0]之间的新值。通常情况下，你可以结合sin + cos来产生一个圆，但我们只需要一个轴上的值，并且由于我们只需要更多的椭圆形状，所以我们使用比半径更小的值进行缩放（图像大小代表轴上的直径）。

因此，通过对我在另一个答案中所做的代码进行的一些修改：

  var ctx = c.getContext（2d）; //只是一些init为demovar img =新的图像; img.onload =切片; img.src =//i.stack.imgur.com/UvqUP.gif \";function切片（）{var w = c.width = this.width; var h = c.height = this.height; var step = Math.PI / w; //画布的半圆/宽度var scale = 75; （var x = 0，offset; x  

< canvas id = c> ;< / canvas>

这些变化在前面的答案中，并应用偏移量而不是公式）。

I have an image with the following pattern:

I want to convert the straight lines in the image into a )|( shape. I have implemented C-type and S-type curves using canvas and its properties, but I am unable to do )|(-curve.

How can I do this?

解决方案

You could modify my previous answer slightly and have the halve sin range applied to the width (or height) as an offset, then take that offset x 2 and subtract from the total height of the new line.

What happens is that the sin() function will take an input and produce a new value between [0.0, 1.0]. Normally you would combine sin+cos to produce a circle, but we only need the value from one axis, and since we only need more of a ellipse shape we scale with a smaller value than radius (image size would represents diameter on the axis you're after).

So with the couple of modifications on the code I made in the other answer:

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 / w;               // half circle / width of canvas
  var scale = 75;                       // max displacement on y
  
  for(var x = 0, offset; x < w; x++) {
    offset = Math.sin(step*x)*scale;
    ctx.drawImage(this,
      x, 0, 1, h,                       // source line from image
      x, offset, 1, h - offset*2);      // displaced line
  }
}

<canvas id=c></canvas>

(for vertical effect just reference where the changes are in the previous answer and apply offset instead of the formula).

这篇关于如何将图像像素转换为）|（ - 画布中的曲线形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！