[Svg moves when applying rotate in Vue Environment]

Update: The issue is that the polygon rotates around some other origin if that specific page is rendered but not currently the page being displayed. It isn't until the page is the focus or displayed page that it actually rotates around the origin desired.

[Svg moves when applying rotate in Vue Environment]

Update: I figured out that when I set the origin to 50% 100% to transform on, it is not rotating by that when it is initially mounted, it rotates around some other origin.

[Svg moves when applying rotate in Vue Environment]

watch:{

Value: function(){

console.log(this.RotateNumber())

TweenMax.to(this.$refs.dial, 2, {rotation: this.RotateNumber(), transformOrigin:"50% 100%"});

},

ValueOther: function(){

//TweenMax.to(this.$refs.rightArrow, 2, {x: this.MoveNumberOther(), transformOrigin:"50% 100%"});

console.log(this.RotateNumber())

TweenMax.to(this.$refs.dial, 2, {rotation: this.RotateNumber(), transformOrigin:"50% 100%"});

}

},

mounted: function(){

// TweenMax.set(this.$refs.middleArrow, {transformOrigin:"middle bottom"})

// Draggable.create(this.$refs.middleArrow, {type: "rotation", throwProps: true, transformOrigin:"50% 50%"});

 

//TweenMax.to(this.$refs.middleArrow, 2, {x: this.MoveNumber(), transformOrigin:"50% 100%"});

//TweenMax.to(this.$refs.rightArrow, 2, {x: this.MoveNumberOther(), transformOrigin:"50% 100%"});

console.log(this.RotateNumber())

TweenMax.to(this.$refs.dial, 2, {rotation: this.RotateNumber(), transformOrigin:"50% 100%"});

},

 

<polygon ref="dial" fill="black" points="430,350 430,175 410,175 435,115 460,175 440,175 440,350" :stroke="ArrowColorOther" style="stroke-width:5" />

 

I have this polygon that I am rotating when a page is mounted in Vue or when two different values change. If I navigate to the page before the values load the polygon is positioned where it should be. However, if I wait for the values to load and THEN navigate to the page the polygon has moved to the lower left of the svg it is in. I am wondering if there is an issue with rotating an object if it is not actually on the current screen.

 

Thanks for any help!

[Div Moves when it changes size and I have changed the Scale]

Thanks Craig!

[Div Moves when it changes size and I have changed the Scale]

I found that transformOrigin helped my case. Do you know how I can transform from just the top and not from the left? This code now transforms from top left, how do I get it to transform from just the top?

 

TweenMax.to(this.$refs.keyboardContainer, 0.35, {scale:this.zoomRatio, force3D:false, transformOrigin:"0 0"});

 

Thanks for all your help!

[Div Moves when it changes size and I have changed the Scale]

Currently I have a div that I am using TweenMax.to(this.$refs.keyboardContainer, 0, {scale:this.zoomRatio, force3D:false}); to resize the div. After I have resized it I change some of the contents inside the div that cause the height of the div to change, and when it does this it moves the Y location of the div. I am wondering how I can get the div that has been rescaled to stay in the same Y location even if it has changed in pixel height.

 

Thanks!

[Greg M]

Is there a way to apply that to specific divs? And not just buttons?

[Greg M]

Do I apply this in my create function or on  the elements themselves? I am also using Vue.js by the way.

[Greg M]

I am using draggable on a custom keyboard. The issue I run into is when you accidentally drag on the keys the keyboard drags and the key press is not fired. My question is, is there a way to only drag a component from the background? And not allow drag on inner elements?