Question
HTML5 Canvas - Remove Child Questions
I am adding a MC symbol to another MC symbol as a child. This is one of six possible MCs that can be added as a child to that parent.
createjs.Touch.enable(stage);
var Lenses = [this.ConcaveSphereLens, this.ConvexSphereLens, this.ConcaveCylinderLens, this.ConvexCylinderLens, this.PrismLens, this.AccessoryLens];
// Apply the same code for each lens MovieClip symbol in the array Lenses with a For Loop
for(var i = 0; i<Lenses.length; i++){
Lenses[i].on("mousedown", onMouseDown.bind(this));
Lenses[i].on("pressmove", onMouseMove.bind(this));
Lenses[i].on("pressup", onMouseUp.bind(this));
Lenses[i].LFLensHolder = this.LFLensHolder;
Lenses[i].lensParentLeft = this.lensParentLeft;
Lenses[i].originX = Lenses[i].x;
Lenses[i].originY = Lenses[i].y;
}
function onMouseDown(evt){
var item = evt.currentTarget;
item.offset = {x:0, y:0};
var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
item.offset.x = pt.x - item.x;
item.offset.y = pt.y - item.y;
item.drag = true;
}
function onMouseUp(evt){
var item = evt.currentTarget;
item.drag = false;
var pt = item.localToLocal(item.dot.x, item.dot.y, item.LFLensHolder.hitBox);
if(item.LFLensHolder.hitBox.hitTest(pt.x, pt.y) ){
item.x = item.LFLensHolder.x;
item.y = item.LFLensHolder.y;
item.lensParentLeft.addChild(item);
item.x-=item.lensParentLeft.x-9.5;
item.y-=item.lensParentLeft.y-9.5;
item.scale = 0.54;
}
}
function onMouseMove(evt){
var item = evt.currentTarget;
if (item.drag){
var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
item.x = pt.x - item.offset.x;
item.y = pt.y - item.offset.y;
}
}
Now I need to enable the child/children to be removed from the parent when either:
- The child is dragged away from item.LFLensHolder.hitBox (or similar...) presumably in the onMouseMove function, and
- The nested 'close' buttons in the child MCs are clicked. Currently these 'close' buttons just move the symbol off stage, but they would also need to remove the child from the parent. The code for the nested close buttons is:
this.closeLens.addEventListener("click", closeThisLens.bind(this));
function closeThisLens()
{
this.x = -200;
this.y = -850;
}
How would I do this?
