拖放无法识别动画CC中拖动对象的子对象
Drag and Drop not recognizing child of drag object in Animate CC
我试图进行拖放操作,但它给我带来了很多问题。我修复了一个,然后又出现了另一个。我让它在它可以看到拖动对象的任何部分是否进入目标区域的地方工作,但我希望它只识别其中一部分(这是一个尖头温度计的图形,在现实生活中你不能用头测量温度)演示。
我得到的错误是"Uncaught TypeError:无法读取未定义的属性‘drag’"(我在演示中标记了‘drag‘,但它是拖动对象内的子移动)
此外,"温度计"answers"拖动"都是movieclips的命名实例。
代码:
var dragger = this.thermometer;
//tried this to see if it would help
var tip = this.thermometer.drag;
var right = this.targetRight;
var wrong = this.targetWrong;
用于移动:
dragger.on("pressmove", function(evt){ evt.currentTarget.x = evt.stageX; evt.currentTarget.y = evt.stageY; if(intersect(tip, right)){ evt.currentTarget.alpha=0.2; } else if(intersect(tip, wrong)){ evt.currentTarget.alpha=0.7; } 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; if(hitTestArray.length > 1){ dragger.alpha = 1; stage.update(evt); }//else{ if(intersect(tip, right)){ //Intersection testing for good (also tried 'dragger.drag' to see if that would work. it didn't) alert("YAY you're right AND it works!"); dragger.alpha = 1; }else if(intersect(tip, wrong)){ //intersection Testing for bad alert("BOO its wrong, but YAY it works"); dragger.alpha = 1; } stage.update(evt); //} }, this);
更新的区间:
用于测试交叉口。
function intersect(obj1, obj2){ var objBounds1 = obj1.nominalBounds.clone(); var objBounds2 = obj2.nominalBounds.clone(); var pt = obj1.globalToLocal(objBounds2.x, objBounds2.y); var h1 = -(objBounds1.height / 2 + objBounds2.height); var h2 = objBounds2.height / 2; var w1 = -(objBounds1.width / 2 + objBounds2.width); var w2 = objBounds2.width / 2; if(pt.x > w2 || pt.x < w1) return false; if(pt.y > h2 || pt.y < h1) return false; return true; }
总之,我需要知道如何使它不被定义,这样我就可以测试其中一个大盒子中的那个小盒子。
发生错误是因为您在那一行使用了this.currentTarget
而不是evt.currentTarget
。
请注意,您的实际代码与上面发布的代码不同。这是现场演示中的代码:
if(intersect(this.currentTarget.drag, right)){
evt.currentTarget.alpha=0.2;
} else if(intersect(this.currentTarget.drag, wrong)){
evt.currentTarget.alpha=0.7;
}
else{
evt.currentTarget.alpha=1;
}
不确定这是否能解决你所有的问题,但它至少能让你向前迈进。
[更新]
再深入一点看,有很多问题可能会导致您的交集函数不起作用:
- 你的左右边界不正确。EaselJS对象没有
width
或height
(更多信息),所以您设置的边界只有x
和y
您可以使用nominalBounds
来获得正确的边界。这提供了符号的未转换的原始边界。您必须考虑到任何缩放。在这种情况下,边界为:*左:{x: 0, y: 0, width: 275, height: 300}
*右图:{x: 0, y: 0, width: 413, height: 430}
- 您的交叉口必须考虑显示列表层次结构。具体来说,在比较位置和大小时,它们应该是相对的。如果拖动目标位于另一个片段内,则需要考虑父对象的定位。我建议在比较坐标时始终在坐标上执行
localToGlobal
示例:
// Find the clip's top/left position in the global scope
var p = myContainer.localToGlobal(myClip.x, myClip.y);
// OR
// Find the clip's position in the global scope
var p = myClip.localToGlobal(0, 0);
相关文章:
- 调整窗口大小时,可拖动的对象会出现在容器外部
- 旋转后拖动对象
- 如何在使用Kinetic拖动同一对象后,在旋转动画中保持先前的偏移
- 通过拖动可以更改三维模型对象在Three.js场景中的位置
- Javascript拖动对象
- jQuery拖动到相对位置的可排序列表中时出现可拖动辅助对象位置问题
- dropable的Over事件是't工作正常,在可拖动对象被拖放到贪婪的可拖动对象上并再次拖动后
- 如何在拖动对象时检测画布的中心线以使其居中
- 允许具有相同 id 的对象可以使用 jQuery 拖动
- 使一组对象与 jQuery 一起拖动
- 删除时禁用可拖动对象
- 可缩放容器鼠标上的可拖动元素在创建时从辅助对象上浮动
- 拖放无法识别动画CC中拖动对象的子对象
- 防止可拖动对象被添加多次jQuery
- html5拖动&drop-TypeError:Node.appendChild的参数1不是对象
- HTML 文档 - 无法阻止对象拖动
- 将对象拖动到特定路径并在同级路径中移动
- 三.js约束对象拖动到另一个对象的表面
- 结构.js以编程方式停止对象拖动
- 用于在浏览器中转换对象(拖动、缩放、旋转和扭曲)的Javascript框架