그래픽 편집기를 구현하는 데 KineticJS를 사용하고 있습니다. KineticJS 그룹을 드래그하여 다른 모양으로 놓고 싶습니다. 지금까지는 "dropend"이벤트를 그룹의 핸들러에 바인딩하는 것이 좋았습니다. 하지만 드래그 중에 커서를 올려 놓을 때 잠재적 인 대상 모양으로 색상을 변경하여 드롭하기에 적합한 모양이라는 증거를 제공하고 싶습니다. 나는 그것을하는 방법을 볼 수 없으며 키네틱 문서에서 어떤 도움을 찾을 수 없었습니다. 내가 어떻게 할 수 있니?KineticJS에서 모양/그룹을 드래그하는 동안 가능한 드롭 대상을 강조 표시합니다.
감사합니다, 일부 궁시렁 후 ECA
는, 나는 해결책을 발견 생각 : 당신이 실제로 작동하고 무슨 짓을했는지
var aShape = new Kinetic.Shape(...);
:
aShape.on("dragmove", function(evt) {
// Detect shapes under mouse position
var pos = aShape.getStage().getUserPosition(evt);
var collidingShapes = aShape.getStage().getIntersections(pos);
:
// If needed, filter out colliding shapes not suitable for drop
:
// Highlight drop target candidates, e.g. simulating a "mouseover"
for (var iTarget = 0; iTarget < collidingShapes.length; ++iTarget)
collidingShapes[iTarget].simulate("mouseover");
// If you need to remove highlighting, keep track of previously
// highlighted shapes and call simulate("mouseout") on those
// not currently in the candidates set.
});
이 있지만, 나는 그것이 매우 느리게 찾을 수 있습니다. 내가 무슨 짓을, kineticjs의 라인 3142 (v4.0.1) 교체했다 :
else if (this.targetShape)
와
else if(this.targetShape && !go.drag.moving)
을하고 그것이 마치 마법처럼 작동합니다. mouseout 및 mouseover 이벤트가 실행됩니다.
어쨌든, 나는 왜 그런지 모르지만 잠재 대상을 가리키는 무대 객체 (shaperagging 정도)의 속성이 있었지만 제거되었습니다.
그냥 생각하지만,이 잠재적 cpu를 사용하지 않도록하는 방법, setInterval 교차로를 확인하는 방법에 대해. 공유 변수를 setInterval로 업데이트하려면 마우스 오버 만 사용하십시오. 그렇게하면 함수가 실행될 때마다 올바른 데이터가 있는지 확인할 수있을뿐 아니라 더 부드럽게 새로 고침 할 수 있습니다. 드래그 할 때 단순히 clearInterval. –