반응 캔버스로 애니메이트 CC에서 드래그 앤 드롭 대상 영역을 조정하는 방법

Question

나는 직사각형과 원보다 더 정확한 드래그 앤 드롭을 만들기 위해 노력하고 있습니다. 지금까지 잘 진행되고있는 것처럼 보입니다. 유일한 문제는 대상 영역이 실제로 모양이있는 위치와 일치하지 않는다는 것입니다.

데모에서, 나는 주로 작업을하고, 객체를 드래그하며, 드롭 영역을 잘 넘습니다. 유일한 문제는 방울 영역이 방울 영역 (접시에있는 음식이라고 생각되는 것)보다 약간 위에있는 것으로 변환되고 있다는 것입니다.

올바른 위치는 팁이 상단으로 들어가는 것입니다. 잘못된 배치는 팁을 음식의 측면에 붙이는 것입니다.

마지막으로 교차 함수와 관련이 있다고 생각하지만 잘 모르겠습니다.

이 관련 코드는 다음과 같습니다 또한

//dragger object 
var dragger = this.thermometer; 

//Correct and incorrect drop spaces. 
var right = this.AreaCorrect; 
var wrong = this.AreaWrong; 

dragger.on("pressmove", function(evt){ 
    evt.currentTarget._goto(0); 
    evt.currentTarget.x = evt.stageX; 
    evt.currentTarget.y = evt.stageY; 

    //can remove this whole thing in the final version 
    if(intersect(evt.currentTarget.drag, right)){ 
     evt.currentTarget.alpha=.5; 

    }else if(intersect(evt.currentTarget.drag, wrong)){ 
     evt.currentTarget.alpha=.2; 

    }else{ 
     evt.currentTarget.alpha=1; 
    } 

    stage.update(evt); 
}, this); 

dragger.on("pressup", function(evt){ 
    //lock position of drag object and play animation if any 
    dragger.x = dragger.x; 
    dragger.y = dragger.y; 

    //remove the alpha changes in final 
    if(intersect(evt.currentTarget.drag, right)){ 
     dragger.mouseEnabled = false; 
     dragger.play(); 
     exportRoot.fb_reading.gotoAndPlay(1); 
     evt.currentTarget.alpha=1; 

    }else if(intersect(evt.currentTarget.drag, wrong)){ 
     dragger.mouseEnabled = false;; 
     dragger.play(); 
     exportRoot.fb_reading.gotoAndPlay(50); 
     evt.currentTarget.alpha=1; 
    } 

    stage.update(evt); 
}, this); 

//returns true or false 
function intersect(drag, target){ 
    var pt = drag.localToLocal(drag.x, drag.y, target); 
    if(target.hitTest(pt.x, pt.y)){ 
     return true; 
    }else{ 
     return false; 
    } 
} 

, 어떤 이유로, 때로는 (항상은 아니지만), 대상 영역을 이동하는 데 도움이 될 수 있습니다 변환 도구를 사용하여 개체의 앵커 포인트를 이동.

이전에 사용했던 codepen에서 교차 기능을 업데이트하기 위해 코드 here을 사용했습니다.

다시, 데모 링크 : https://mhardingfoodsafe.github.io/dragndropNEW/

Answer 1

나는이 그것을 할 (나는 ... 찾은 것이) 가장 좋은 방법이라고 생각합니다. 내가 한 것은 버튼들을 영화 클립으로 변환하는 것이었지만 animateCC는 그것을 가지고 있어야하는만큼 좋은 것으로 변환하지 못했습니다. 나는 그것들을 지우고 그 지역이 있어야만하는 하나의 프레임과 하나의 레이어를 가진 신선한 무비 클립을 만들어야했습니다. 다음과 같이 거기에서

, 나는 교차 기능을 변경 :

function intersect(drag, target){ 
    var pt = drag.globalToLocal(target.x, target.y); //-----This line 
    if(target.hitTest(pt.x, pt.y)){ 
     return true; 
    }else{ 
     return false; 
    } 
} 

그것은 localToLocal()로 사용하지만 그것을 엉망으로했다, 그래서 나는 globalToLocal()에 그것을 만들었다. 이것은 내가 모르는 이유로 실제 점수보다 훨씬 높게 등록하게 만들었습니다.

이 시점에서 방금 목표 위치를 조정하면서이 반응을 유지하는 방법을 알아 냈습니다.