Rotate image on center of axis, relative position to the canvas
Quote from Ronnie on August 29, 2019, 4:51 pmHi luishp,
I loaded an Image1 into Container1. I have a slider control. In the "changing tab" of Slider control, I want to programmatically rotate the Image1 at its center axis. I added below script:
fabSetProperty "Container1" "Image1" "angle" "[Deg]"
fabSetProperty "Container1" "Image1" "centeredRotation" "true"
fabOriginX "Container1" "Image1" "center"
fabOriginY "Container1" "Image1" "center"However, I noticed that Image1's center axis moved to the 0,0 of the Container1 canvas the moment I adjust the slider trackbar. It does not rotate along the center axis of the Image1 position at all. According to some sites, the behaviour is the axis was default to the Image1's left handle instead. Anyway, even when I moved the image the first time to another location, and then use the slider control to rotate, the Image1 will move to the 0,0 location of Container1. It'll not rotate smoothly based on the Image1 relative position.
I also noticed that the rotation symptom happened only on the 1st time. Once the "angle" event has been activated, moving the image1 anywhere will see it rotate smoothly from its center axis.
How do I fixed this rotation symptom using script, and not clicking on the Image1 handle and click on the rotating point handle?
Hi luishp,
I loaded an Image1 into Container1. I have a slider control. In the "changing tab" of Slider control, I want to programmatically rotate the Image1 at its center axis. I added below script:
fabSetProperty "Container1" "Image1" "angle" "[Deg]"
fabSetProperty "Container1" "Image1" "centeredRotation" "true"
fabOriginX "Container1" "Image1" "center"
fabOriginY "Container1" "Image1" "center"
However, I noticed that Image1's center axis moved to the 0,0 of the Container1 canvas the moment I adjust the slider trackbar. It does not rotate along the center axis of the Image1 position at all. According to some sites, the behaviour is the axis was default to the Image1's left handle instead. Anyway, even when I moved the image the first time to another location, and then use the slider control to rotate, the Image1 will move to the 0,0 location of Container1. It'll not rotate smoothly based on the Image1 relative position.
I also noticed that the rotation symptom happened only on the 1st time. Once the "angle" event has been activated, moving the image1 anywhere will see it rotate smoothly from its center axis.
How do I fixed this rotation symptom using script, and not clicking on the Image1 handle and click on the rotating point handle?
Quote from Ronnie on August 30, 2019, 12:22 pmHi luishp
Simple app. Just need to rotate the pinwheel on its center axis, and not on its left handle.
Hi luishp
Simple app. Just need to rotate the pinwheel on its center axis, and not on its left handle.
Uploaded files:- You need to login to have access to uploads.
Quote from luishp on August 30, 2019, 5:41 pmHi @ronnie,
Take a look at the attached project.
I have included some comments.
Note that you can use fabInitializeStatic to avoid the user being able to modify any canvas object by clicking on it.
Hi @ronnie,
Take a look at the attached project.
I have included some comments.
Note that you can use fabInitializeStatic to avoid the user being able to modify any canvas object by clicking on it.
- You need to login to have access to uploads.
Quote from Ronnie on August 31, 2019, 3:30 amHi @luishp
The demo works great. Perhaps you might want to have those samples you did and have it as demos for others to explore too.
BTW, what's the intent of below script:
.New position fabSetLeft "Container1" "Image1" 300 fabSetTop "Container1" "Image1" 200Initially I though it was due to the sample image size. But when I changed and load a different image and scaled them different from the sample, there are no changes in the left/top position
Hi @luishp
The demo works great. Perhaps you might want to have those samples you did and have it as demos for others to explore too.
BTW, what's the intent of below script:
.New position fabSetLeft "Container1" "Image1" 300 fabSetTop "Container1" "Image1" 200
Initially I though it was due to the sample image size. But when I changed and load a different image and scaled them different from the sample, there are no changes in the left/top position
Quote from luishp on August 31, 2019, 12:41 pmBTW, what's the intent of below script
They are just to adjust the image position
After changing the Y and X origin coordinates, the original image position changes too.
No necessary really.
I will try to add some more demos on next release.
I just need time! :)
BTW, what's the intent of below script
They are just to adjust the image position
After changing the Y and X origin coordinates, the original image position changes too.
No necessary really.
I will try to add some more demos on next release.
I just need time! :)
Quote from Ronnie on August 31, 2019, 4:46 pmYes, there are potentials in using fabricjs with VisualNeo Web. Here’s some feedback after testing the fabricjs.
I noticed some events like cornerSize and transparentCorners have no effect, while others like cornerColor are working fine while using the fabSetProperty functions. Nothing major but with the current settings, a little difficult to adjust the handles on mobile and tablets, although on MAC and Windows are ok using mouse.
BTW, I downloaded the gesture version and replace the fabric js file manually. The gestures (like 2 fingers and stretch to enlarge object) works well on mobile and tablets, but there are issues with the drawing commands. The circles and rect are not drawn - looks like got to do with the active layer.
Thinking wild, I loaded a map (leaflet with open maps) on iFrame on Container2. The maps loaded quickly. However, when I try to copy the HTML in Container2 to Container1 canvas, I could not. I tried DuplicateObject and while it was pasted to Container1, it’s more of an overlay than being an object drawn on canvas. There are HTML2Canvas JS and perhaps it could open possibilities when we can load/link these external JS and write a beginJS-EndJS script directly...
Yes, there are potentials in using fabricjs with VisualNeo Web. Here’s some feedback after testing the fabricjs.
I noticed some events like cornerSize and transparentCorners have no effect, while others like cornerColor are working fine while using the fabSetProperty functions. Nothing major but with the current settings, a little difficult to adjust the handles on mobile and tablets, although on MAC and Windows are ok using mouse.
BTW, I downloaded the gesture version and replace the fabric js file manually. The gestures (like 2 fingers and stretch to enlarge object) works well on mobile and tablets, but there are issues with the drawing commands. The circles and rect are not drawn - looks like got to do with the active layer.
Thinking wild, I loaded a map (leaflet with open maps) on iFrame on Container2. The maps loaded quickly. However, when I try to copy the HTML in Container2 to Container1 canvas, I could not. I tried DuplicateObject and while it was pasted to Container1, it’s more of an overlay than being an object drawn on canvas. There are HTML2Canvas JS and perhaps it could open possibilities when we can load/link these external JS and write a beginJS-EndJS script directly...