Change layer for symbol in code - HTML5 Canvas

[FlatChat]

How can a symbol be changed to a layer through JavaScript?

[FlatChat]

I made the stage really big in the document settings.

The parented lens is attached to the parent OK, but it was way down in the bottom left corner, normally off stage in the original stage size.  It has also lost it's scale as set as an instance.  

[kglad]

you mean bottom right (the sum of those two x,y's).

[FlatChat]

Yeah bottom right X Y

[FlatChat]

I know it's attached to the parent MC as when I click to rotate that lensHolder, the lens rotates. Though the rotation/transform point is  the the centre of the lenHolder/hitbox, so it appears the lens has laos lost it's original transform point. A solution might be to reset it's transfom point once parented back to the lensHolder (or parent MC)...

[FlatChat]

Or else subtract the X and Y of the parent from the lens X and Y once parented??  If so, how would that be done?

[kglad]

just assign the x and y of the lens when reparenting.

[FlatChat]

You mean when setting the parent?  Setting the X Y of the lens after parenting does not seem to do anything...

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);
		//console.log(item.parent);
		item.x = 662.65;
		item.y = 539.2;
	}
}

[kglad]

try

item.x-=item.lensParentLeft.x;

item.y-=item.lensParentLeft.y;

[FlatChat]

Yes, that works with a bit of offset to the x and y.

What about the size?  The lens has increased in size, it seems that the size has been cumulative as well as the position...

[kglad · Accepted solution]

do the same for scaleX and scaleY.

[FlatChat]

@kglad  Thanks for all of  your help with this.  Greatly appreciated!

One last question on this thread.  How do I access the instance name of item in the following code, that is after the addChild??

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);
		//console.log(item.parent);
		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;
	}
}

[FlatChat]

Ah, item.name

[kglad · Accepted solution]

this:

item.x-=item.lensParentLeft.x-9.5;
		item.y-=item.lensParentLeft.y-9.5;

suggests item.lensParentLeft is not aligned at 0,0 on its own timeline, and is 19px wide and high and is centered.  align at 0,0 and you won't need that fudge factor. or if that's where it needs to be aligned for other reasons use:

item.x-=item.lensParentLeft.x-item.lensParentLeft.width/2;
item.y-=item.lensParentLeft.y-item.lensParentLeft.height/2;