कैनवास के केंद्र बिंदु कैसे प्राप्त करें - जावास्क्रिप्ट, एचटीएमएल 5, कैनवास, कोनवाज

कैनवास ऑब्जेक्ट / आयताकार का केंद्र बिंदु कैसे प्राप्त करें। मैं अपनी छोटी परियोजना के लिए Konvajs पुस्तकालय का उपयोग करें। कोवा दस्तावेज में कहा गया है कि आपको अच्छे घूर्णन के लिए बिंदु को केंद्र में रखना होगा। http://konvajs.github.io/docs/animations/Rotation.html

भूतपूर्व

 var yellowRect = new Konva.Rect({
x: 220,
y: 75,
width: 100,
height: 50,
fill: "yellow",
stroke: "black",
strokeWidth: 4,
offset: {
x: 50 // how to solve this using formula so it will dynamic,
y: 25 // how to solve this using formula so it will dynamic
}
});

उत्तर:

जवाब के लिए 2 № 1

अपने केंद्रों के चारों ओर आयताकार वस्तुओं को घूर्णन करना

डिफ़ॉल्ट रूप से, KonvaJS अपने ऊपरी-बाएं कोने पर एक आयताकार के घूर्णन बिंदु को सेट करता है। इसलिए आयताकार के केंद्र से घूमने के लिए आपको रोटेशन बिंदु को आयताकार के केंद्र में धक्का देना चाहिए।

आप इसे सेट करके कर सकते हैं offsetX=rectangleWidth/2 तथा offsetY=rectangleHeight/2

var yellowRectWidth=100;
var yellowRectHeight=50;
var yellowRect = new Konva.Rect({
x: 220,
y: 75,
width: yellowRectWidth,
height: yellowRectHeight,
fill: "yellow",
stroke: "black",
strokeWidth: 4,
offset: {
x: yellowRectWidth/2,
y: yellowRectHeight/2
}
});

अपने केंद्रों के चारों ओर परिपत्र वस्तुओं को घूर्णन करना

डिफ़ॉल्ट रूप से, KonvaJS उनके केंद्र बिंदुओं पर परिपत्र आकार के घूर्णन बिंदु सेट करता है। इसलिए परिपत्र आकार के केंद्र से घूमने के लिए आपको "ऑफसेट सेट करना होगा"।


संबंधित सवाल
सबसे लोकप्रिय