html5 - कैनवास में छवि पिक्सेल को एस-वक्र आकार में कैसे परिवर्तित करें



canvas html5-canvas (1)

अगर मैं आपको सही ढंग से समझता हूं तो आप प्रत्येक ऊर्ध्वाधर रेखा को "एस" का पालन करना चाहते हैं?

यदि ऐसा मामला है तो आप f.ex. का उपयोग कर सकते हैं। Math.sin() के आधार पर टुकड़े को विस्थापित करते हुए छवि प्रति पिक्सेल स्तंभ टुकड़े टुकड़े करने के लिए drawImage() को drawImage() और उसके क्लिपिंग मापदंडों के साथ जोड़ा गया।

प्रमुख सूत्र हैं:

var step = Math.PI * 2 / w;

यह नक्शा कैनवास की चौड़ाई के लिए एक पूर्ण चक्र है, ताकि जब हम अंत तक पहुँचते हैं तो हम शुरुआती बिंदु पर वापस आ जाएंगे, इस स्थिति में एस-वक्र बनाना होगा

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

यह पहले गणना की गई मूल्य के आधार पर वाई-अक्ष पर विस्थापन की गणना करता है, जो अब एक्स स्थिति से जुड़ा हुआ है। यह 1 और 1 के बीच एक मूल्य पैदा करता है, इसलिए हमें इसे स्केल करने की आवश्यकता है स्केल पिक्सल की संख्या में अधिकतम त्रिज्या का प्रतिनिधित्व करता है।

उदाहरण

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>

एक्स-अक्ष पर (स्पष्ट रूप से इस मामले में दिखाई नहीं दे रहा है क्योंकि परिवर्तन लाइनों के साथ होता है और अन्य तरीकों से उपयोग किया जा सकता है, जैसे प्रत्येक छोर पर एस-आकृति के साथ ओवर-ड्राइंग):

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>

मेरे पास ऐसी छवि है

मैं चाहता हूं कि हम छवि में सीधी रेखाएं देख रहे हैं (वास्तव में पिक्सेल हैं), इसे एस-वक्र में परिवर्तित करना चाहिए मैंने सी-प्रकार के वक्र को कैनवास और उसके गुणों का उपयोग करते हुए लागू किया है, लेकिन एस-वक्र करने में असमर्थ है I

कृपया मुझे इसके लिए मदद करें





bezier