html - छवि पिक्सेल को कैसे परिवर्तित करें) |-(कैनवास में घुमाव आकार




canvas html5-canvas (2)

मेरे पास निम्न प्रतिमान के साथ एक चित्र है:

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

मैं यह कैसे कर सकता हूँ?


आप मेरे पिछले उत्तर को थोड़ा संशोधित कर सकते हैं और एक ऑफसेट के रूप में चौड़ाई (या ऊंचाई) पर आधा पाप रेंज लागू कर सकते हैं, फिर ऑफसेट एक्स 2 ले लें और नई लाइन की कुल ऊंचाई से घटाएं

क्या होता है कि पाप () फ़ंक्शन एक इनपुट लेगा और [0.0, 1.0] के बीच एक नया मान पैदा करेगा। आम तौर पर आप एक चक्र का निर्माण करने के लिए पाप + को जोड़ सकते हैं, लेकिन हमें केवल एक अक्ष से मूल्य की आवश्यकता है, और जब से हमें केवल एक अंडाकार आकार की अधिक आवश्यकता है, हम त्रिज्या की तुलना में एक छोटे मान के साथ पैमाने पर (छवि आकार अक्ष पर व्यास का प्रतिनिधित्व करेंगे 'पुनः के बाद)।

इसलिए मैंने दूसरे उत्तर में कोड पर किए गए संशोधनों के साथ:

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>

(ऊर्ध्वाधर प्रभाव के लिए सिर्फ संदर्भ जहां पिछले उत्तर में परिवर्तन होते हैं और फार्मूले के बजाय ऑफसेट लागू होते हैं)।


छवि पैमाने पर पाप लहर लागू करने के लिए क्षैतिज केंद्र से दूरी का उपयोग करें। आप केवल पाप लहर (पीआई / 2 से पीआई) का हिस्सा चाहते हैं या (कॉस 0 से पीआई / 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>





bezier