Skip to main content
Inspiring
February 21, 2022
Answered

Change layer for symbol in code - HTML5 Canvas

  • February 21, 2022
  • 1 reply
  • 2768 views

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

    This topic has been closed for replies.
    Correct answer kglad

    Ah, item.name


    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;

    1 reply

    kglad
    Braniac
    February 21, 2022

    that doesn't make sense, so it can't be done.

     

    but it's probable that whatever you're trying to accomplish can be done.  what is that?

    FlatChatAuthor
    Inspiring
    February 22, 2022

    @kglad   I thought it made sense when I wrote the question... 

     

    So, I have a MovieClip symbol in a layer on stage.  The symbol has the instance ID 'ConcaveSphereLens'. It's an optometry trial lens that fits into a trial frame.

     

    The symbol 'ConcaveSphereLens' is draggable and I want it to be above all other elements on stage when dragged. 

     

    However, when dropped, it snaps into the trail lens frame.  That part that it snaps into has supports for the lens. 

     

    In real life, the lens is slid into those supports which have grooves to hold the lens.  So the top faces of those supports appear in front of the dragged lens.  See image below.

     

    Therefore, I want to change the layer of the dragged lens, so that when it is dropped, it changes layer to one that sits behind the lens supports.  So, dragged in front of the supports and dropped behind the supports that are in their own layer.

     

    In my Animate move, as an example a lens in red which is sitting in the lens supports on the trial frame.

     

     

    The frame and lens in real life..

     

     

    FlatChatAuthor
    Inspiring
    February 24, 2022

    do the same for scaleX and scaleY.


    @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;
    	}
    }