html - seguimiento - Cómo convertir el píxel de la imagen en | |(forma de la curva en el lienzo

manual de programacion android pdf

Question

Tengo una imagen con el siguiente patrón:

Quiero convertir las líneas rectas en la imagen en a) | (forma. He implementado curvas tipo C y tipo S utilizando canvas y sus propiedades, pero no puedo hacer) | -curve.

¿Cómo puedo hacer esto?

Answer 1

Puede modificar mi respuesta anterior ligeramente y hacer que el rango de siniestro de la mitad se aplique al ancho (o alto) como un desplazamiento, luego tome ese desplazamiento x 2 y reste de la altura total de la nueva línea.

Lo que sucede es que la función sin () tomará una entrada y producirá un nuevo valor entre [0.0, 1.0]. Normalmente combinaría sin + cos para producir un círculo, pero solo necesitamos el valor de un eje, y dado que solo necesitamos más de una forma de elipse, escalamos con un valor menor que el radio (el tamaño de la imagen representaría el diámetro en el eje que es después).

Entonces con el par de modificaciones en el código que hice en la otra respuesta:

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>

(para el efecto vertical simplemente haga referencia a los cambios que están en la respuesta anterior y aplique el desplazamiento en lugar de la fórmula).

Answer 2

Use la distancia desde el centro horizontal para aplicar una onda sinusoidal a la escala de la imagen. Solo quieres una parte de la onda sinusoidal (PI / 2 a PI) o (cos 0 a PI / 2)

var img = new Image;
img.src = "//i.stack.imgur.com/UvqUP.gif";
var ctx = can.getContext("2d");
img.onload = function () {
    var w,h,ch,cw,amount,x,scale;
    w = can.width = this.width;
    h = can.height = this.height;
    cw = w / 2;
    ch = h / 2;
    amount = 50;  // amount to bend in pixels
    amount *= 1 / ch;  // convert to unit scale
    for(var x = 0; x < w; x++) {
     scale = 1.0 - (Math.cos(((cw - x) / cw) * Math.PI * 0.5)) * amount;
        ctx.drawImage(this, x, 0, 1, h, x, ch - ch * scale , 1, h * scale); 
    }
}

<canvas id="can"></canvas>