javascript कैनवस पर दिए गए निर्देशांक द्वारा छवि कैसे खींचना है?



html5 image (1)

मैं इस समाधान को एक अस्थायी रूप में पोस्ट करता हूं, अगर मैं कुछ ऐसी चीज आ सकता हूं जो छवि को सही तरीके से घूमती है तो मैं इसे इसके अलावा एक नया उत्तर के रूप में पोस्ट करता हूं

प्रसंग के शुरुआती चरण और लाइन का उपयोग करके आप एक आकृति बना सकते हैं:

ctx.beginPath();
ctx.lineTo(coor.leftTop[0], coor.leftTop[1]);
ctx.lineTo(coor.rightTop[0], coor.rightTop[1]);
ctx.lineTo(coor.rightBottom[0], coor.rightBottom[1]);
ctx.lineTo(coor.leftBottom[0], coor.leftBottom[1]);
ctx.closePath();

फिर आप छवि से एक पैटर्न बना सकते हैं और इसे फ़ॉस्टस्टाइल के रूप में सेट कर सकते हैं

var pattern = ctx.createPatter(img2, "repeat");
ctx.fillStyle = pattern;

फिर संदर्भ का अनुवाद करें ताकि पैटर्न सही स्थिति से शुरू हो जाए (@किलिडो फ़िर के लिए धन्यवाद, यह बताएं):

ctx.restore();  // set back the context from the previous try
ctx.save();
ctx.translate(coors.leftTop[0], coors.leftTop[1]);

और अंत में आप आकार को भरने के लिए पैटर्न का उपयोग कर सकते हैं:

ctx.fill();

मैंने आवंटित निर्देशांक पर आवश्यक चित्रों के रूप में चित्र लगाने का प्रयोग किया, लेकिन मैं न तो आकार और कोण का मिलान कर सकता हूं और ठीक किया, केवल शीर्ष बाएं मैचों

var _width, _height;
var img = new Image();
var img2 = new Image(),
    img2Widht = 0,
    img2Height = 0;

img.src = "http://production.manboker.com/share/1.jpg";
var canvas = document.getElementById("canvas");
img.onload = function() {
  canvas.width = _width = this.width;
  canvas.height = _height = this.height;
  img2.src = "http://production.manboker.com/share/2.png";
  img2.onload = function() {
    img2Widht = coor['rightTop'][0] - coor['leftTop'][0];
    img2Height = coor['leftBottom'][1] - coor['leftTop'][1];
    step1();
  }
}
var coor = {
  leftTop: ["92", "569"],
  rightTop: ["672", "569"],
  leftBottom: ["109", "1437"],
  rightBottom: ["723", "1437"]
}

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function step1() {
  ctx.clearRect(0, 0, _width, _height);
  ctx.globalCompositeOperation = 'source-over';
  ctx.drawImage(img,0,0);
  //ctx.globalCompositeOperation = "multiply";
  step2();
}

function step2() {
  ctx.drawImage(img2, 92,569,img2Widht,img2Height);
}
* {
  padding: 0;
  margin: 0;
}
html,
body {
  position: relative;
  overflow: hidden;
  height: 100%;
  width:100%;
}
<canvas id="canvas" style="position:absolute;"></canvas>

क्या कोई मुझे सही कोण के साथ इसे खींचने के लिए कह सकता है?





html5-canvas