गतिशील रूप से निर्मित समूह वाली वस्तु को निहित क्षेत्र में स्थानांतरित करना? (html5canvas - fabric.js)

Question

जो मैं बनाने की कोशिश कर रहा हूं वह एक छोटा कैनवास विजेट है जो उपयोगकर्ता को गतिशील रूप से एक छवि पर आकार बनाने की अनुमति देता है और फिर उसे उस क्षेत्र से ऊपर रखता है जिसने अपनी रुचि पकड़ी है, प्रभावी रूप से यह एक प्रभावी है हाइलाइटर।

समस्या ज़ूम फ़ंक्शन जोड़ने के साथ है, क्योंकि जब मैं छवि पर ज़ूम करता हूं तो मैं इसे सुनिश्चित करना चाहता हूं;

1. गतिशील रूप से बनाए गए आकार छवि क्षेत्र के बाहर कहीं भी खींचा जाने का कोई संभावित तरीका नहीं है। (पूरा - आईएसएच, दूसरे चरण पर निर्भर करता है)
2. आप पृष्ठ दृश्य से छवि को खींच नहीं सकते हैं, कैनवास क्षेत्र सफेद स्थान नहीं दिखा सकता है। छवि का हिस्सा हमेशा दिखाया जाना चाहिए, और पूरे कैनवास क्षेत्र को भरना चाहिए। (समस्या)

---

यहां दो उदाहरण है कि मैं तैयार किया है, जिनमें से न तो सही ढंग से काम कर रहे हैं;

First example - getBoundingRect does not update and is bound to the image

Second example - getBoundingRect does update and is bound to the grouped object

लिंक विवरण आप देख सकते हैं मुझे लगता है कि मैं इस समस्या संकुचित कर दिया है नीचे, या कम से कम कैसे getBoundingRect बर्ताव करता है के साथ स्क्रिप्ट के बीच एक महत्वपूर्ण अंतर पर ध्यान से।

पहला प्लंक ठीक काम करता प्रतीत होता है, जब तक आप कई बार ज़ूम इन करने और ज़ूम ज़ूम स्तर पर ज़ूम करने का प्रयास नहीं करते हैं, तो ऐसा लगता है कि यह कुछ बगैर लग सकता है (कुछ क्लिक और थोड़ा गड़बड़ हो सकता है, यह बहुत है असंगत)। दूसरा प्लंक बहुत चिड़चिड़ाहट है और बहुत अच्छी तरह से काम नहीं करता है।

मैं इस पर एक सप्ताह या उससे भी ज्यादा समय तक अटक गया हूं, और मैं ब्रेकिंग पॉइंट पर हूं! तो वास्तव में उम्मीद है कि कोई यह बता सकता है कि मैं क्या गलत कर रहा हूं?

पहले प्लंक के लिए नीचे कोड स्निपेट;

// creates group 

    var objs = canvas.getObjects(); 


    var group = new fabric.Group(objs, { 
    status: 'moving' 
    }); 

    // sets grouped object position 

    var originalX = active.left, 
    originalY = active.top, 
    mouseX = evt.e.pageX, 
    mouseY = evt.e.pageY; 

    active.on('moving', function(evt) { 
    group.left += evt.e.pageX - mouseX; 
    group.top += evt.e.pageY - mouseY; 
    active.left = originalX; 
    active.top = originalY; 
    originalX = active.left; 
    originalY = active.top; 
    mouseX = evt.e.pageX; 
    mouseY = evt.e.pageY; 


    // sets boundary area for image when zoomed 
    // THIS IS THE PART THAT DOESN'T WORK 

    active.setCoords(); 

    // SET BOUNDING RECT TO 'active' 

    var boundingRect = active.getBoundingRect(); 

    var zoom = canvas.getZoom(); 
    var viewportMatrix = canvas.viewportTransform; 

    // scales bounding rect when zoomed 

    boundingRect.top = (boundingRect.top - viewportMatrix[5])/zoom; 
    boundingRect.left = (boundingRect.left - viewportMatrix[4])/zoom; 
    boundingRect.width /= zoom; 
    boundingRect.height /= zoom; 

    var canvasHeight = canvas.height/zoom, 
     canvasWidth = canvas.width/zoom, 
     rTop = boundingRect.top + boundingRect.height, 
     rLeft = boundingRect.left + boundingRect.width; 

    // checks top left 

    if (rTop < canvasHeight || rLeft < canvasWidth) { 
     group.top = Math.max(group.top, canvasHeight - boundingRect.height); 
     group.left = Math.max(group.left, canvasWidth - boundingRect.width); 
    } 

    // checks bottom right 

    if (rTop > 0 || rLeft > 0) { 
     group.top = Math.min(group.top, canvas.height - boundingRect.height + active.top - boundingRect.top); 
     group.left = Math.min(group.left, canvas.width - boundingRect.width + active.left - boundingRect.left); 
    } 


    }); 

    // deactivates all objects on mouseup 

    active.on('mouseup', function() { 
    active.off('moving'); 
    canvas.deactivateAll().renderAll(); 

    }) 

    // sets group 

    canvas.setActiveGroup(group.setCoords()).renderAll(); 


} 

---

संपादित करें:

मैं टिप्पणी नहीं जोड़ा गया है और plunks में कोड को आसान बनाने की कोशिश की है।

प्रासंगिक कोड if (active.id == "img") { कोड ब्लॉक के भीतर शुरू होता है।

मैंने अप्रासंगिक कोड को नीचे के कार्यों के रूप में रखा है, उन्हें बड़े पैमाने पर अनदेखा किया जा सकता है। (createNewRect() + preventRectFromLeaving())

मैंने भ्रम से बचने के लिए एक टुकड़े को हटा दिया है।

मुझे बताएं कि यह मदद करता है, या अगर मुझे आगे सरल बनाने की कोशिश करनी चाहिए।

धन्यवाद!

Answer 1

मुझे लगता है कि समूह पृष्ठभूमि छवि की स्थिति के साथ गड़बड़ कर रहा था। इसलिए, जब मैं छवि चल रहा हूं और मैन्युअल रूप से रेक्ट की स्थिति को मैन्युअल रूप से अपडेट कर रहा हूं तो समूह को हटाने का प्रयास किया।

यह

var lastLeft = active.left, 
    lastTop = active.top; 

जाने से पहले छवि के अंतिम स्थिति सेट और फिर यह उन और रेक्ट की स्थिति हर बार छवि ले जाता है

rect.left += active.left - lastLeft; 
rect.top += active.top - lastTop; 
// I think this is needed so the rectangle can be re-selected 
rect.setCoords(); 
lastLeft = active.left; 
lastTop = active.top; 

चूंकि छवि रहने के लिए है अद्यतन करता है कैनवास के भीतर, जब भी छवि चलता है, तो भी कैनवास के अंदर रेक्ट रहता है। आपके द्वारा लिखे गए शेष कोड को ठीक काम करना प्रतीत होता था।

http://plnkr.co/edit/6GGcUxGC7CjcyQzExMoK?p=preview