कैनवास में माउस ऑफसेट [fabric.js]

Question

मैंने माउस ऑफसेट के बारे में 3-5 विषयों को पढ़ा है, लेकिन मुझे अभी भी गड़बड़ नहीं मिल सकती है।

मेरे मामले में सबकुछ 60% में ठीक काम करता है। अन्य 40% माउस ऑफसेट है। Demo here।

कभी-कभी ऑब्जेक्ट स्थिति माउस व्यवहार से संबंधित नहीं होती है। (आईई & क्रोम में सबसे बड़ी गड़बड़ी है)

मैंने स्टाइलशीट और पैरेंट div संपादित करने की कोशिश की लेकिन कुछ भी नहीं। सबसे बुरी चीज: मुझे कोई नियमितता नहीं दिखाई देती है। मैं किसी भी मदद के लिए बहुत अच्छा होगा।

Answer 1

यह अविश्वसनीय है! मैंने बग तय कर दिया है।

<div class="logo"> 
<a href="/"><img src="logo.png" alt="" /></a> 
</div> 

इस कोड को कैनवास करने के लिए कोई उचित संबंध नहीं: तुम मुझे कभी विश्वास नहीं करेंगे ...

पेज के शीर्ष में यह कोड की तरह था। इस वर्ग में सरल सीएसएस है: {float: left; margin: 10px 0 0 0;}

लेकिन किसी कारण से इस कोड ने कैनवास में माउस ऑफसेट को मजबूर कर दिया। मैंने इस कोड को रीमेड किया है:

<div class="logo"> 
<a href="/" class="logoHref"></a><!--- image is in css bg ---> 
</div> 

... और अब सब ठीक काम करने के लिए सोचता है।

मुझे इन घटनाओं के बीच कोई कोरलेशन नहीं दिख रहा है लेकिन तथ्य यह तथ्य है। यह मेरे लिए एक कठिन दिन था ...

Answer 2

पृष्ठ पर अन्य तत्वों की स्थिति के कारण कैनवास ऑफसेट मान बदल सकता है।

तुम सिर्फ कैनवास में एक तत्व है कि समस्या का कारण जोड़ने के बाद या कोड में canvas.renderAll() विधि बुला के बाद canvas.calcOffset() कॉल करने के लिए की जरूरत है।

Answer 3

आप ऐसा कर सकते हैं: मैं कैनवास बनाने

canvas.on("after:render", function(){ canvas.calcOffset() }); 

मैं केवल यह करने के बाद। जब कोई आकार बदलने का कार्यक्रम नहीं होता है तो यह अंतरिम कॉल होता है। वह तब होता है जब बग प्रकट होता है।

Answer 4

यह ऑफसेट समस्या तब होती है जब भी कैनवास HTML दस्तावेज़ में स्थानांतरित हो जाता है। उदाहरण के लिए, यदि आप कैनवास के ऊपर ऊंचाई में 10px का तत्व जोड़ते हैं, तो कैनवास पहले प्रस्तुत किए जाने के बाद, आपकी ऑब्जेक्ट्स 10px से ऑफ़सेट हो जाएंगी। इस कोड को जब भी कैनवास HTML दस्तावेज़ में उसका स्थान है जोड़ें, और यह माउस अन्तरक्रियाशीलता पुनर्गणना चाहिए:

canvas.on("after:render", function(){ 
    canvas.calcOffset(); 
}); 

Fabric.js स्वचालित रूप से इस विधि जब भी खिड़की आकार दिया जाता है, जो तुम क्यों नहीं दिख रहा है कहता है उस घटना पर मुद्दा।

Answer 5

कैनवास के भीतर किसी ऑब्जेक्ट की ऑफ़सेट स्थिति की संभावना कैनवास के मूल निर्देशांक और डीओएम मैनिपुलेशन द्वारा बाल वस्तुओं को बदलने की संभावना है।

मुझे मिला एक आसान समाधान यह सुनिश्चित करना है कि मैं इसे जोड़ने के तुरंत बाद कैनवास में जोड़े गए किसी भी ऑब्जेक्ट के निर्देशांक सेट करता हूं।उदाहरण के लिए, यदि आप मानते हैं कि ऑब्जेक्ट एक छवि है, तो आप निम्न कार्य करेंगे:

var canvas = new fabric.Canvas(); 
var image = new Image(); 

canvas.add(image); 
image.center() // Optional if you wish the object centered on canvas 
image.setCoords(); 

आशा है कि इससे मदद मिलती है। सौभाग्य!