Rotating an image within a graphic

Visuals, audio, animation. Blended, not stirred. If LiveCode is part of your rich media production toolbox, this is the forum for you.

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller, robinmiller

Post Reply
capellan
Posts: 629
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

Rotating an image within a graphic

Post by capellan » Mon Apr 22, 2019 7:49 pm

Hi All,

Does exists some property that allows to rotate an image
within a polygonal graphic?

I have tried: 1) rotate the image and
2) set the graphic background pattern to the image id

but the graphic still shows the original image, without rotation.

If I try the same with a button instead of a polygon graphic,
then the image rotates within the button.

Check the attached stack. Leaving and returning to the card
effectively updates the image within the graphic but is not as
fast and responsive as rotating the image and the button icon.

Al
Rotate_bitmap_inside_graphic_v01.livecode.zip
Compressed stack
(110.97 KiB) Downloaded 60 times
Stack screenshot Rotate image within graphic.jpg
Stack screenshot

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 4141
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Rotating an image within a graphic

Post by richmond62 » Mon Apr 22, 2019 9:08 pm

Why do you want to do this?

If you want to use the polygonal graphic as a framing device there is a much simpler
way of doing things.

https://www.dropbox.com/s/tiqrqvsw61nno ... 2.zip?dl=0
-
Screenshot 2019-04-22 at 23.21.56.png

capellan
Posts: 629
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

Re: Rotating an image within a graphic

Post by capellan » Mon Apr 22, 2019 10:30 pm

I want to change the graphic points while the image is rotating.

Actually, I tried setting "true" the stack property "Acceleratedrendering"
but this does not redraw the backpattern image within the polygon graphic.

Panos advice's provided in this previous forum thread does not refresh
the graphic backpattern image:
Try the following:
set the backcolor of this card to the backcolor of this card
This should force a screen redraw.
Check the forum thread:
https://forums.livecode.com/viewtopic.p ... ating+card

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Rotating an image within a graphic

Post by [-hh] » Tue Apr 23, 2019 11:03 am

You could try the following.
  • set the ink of the (filled/opaque) graphic to "blendDstOut".
  • put the image layered *on TOP* of the graphic.
  • set the ink of the image to "blendDstOver" (or "blendDstAtop").
Then don't rotate the image but set its angle (and may be its loc) and set its lockloc to false.
And set the points (and/or other properties) of the graphic.

I called this ink technique "keyhole" technique, see an example stack here:
viewtopic.php?p=135480#p135480
shiftLock happens

bogs
Posts: 4349
Joined: Sat Feb 25, 2017 10:45 pm

Re: Rotating an image within a graphic

Post by bogs » Tue Apr 23, 2019 7:08 pm

Pretty clever, and slick to boot.
Image

capellan
Posts: 629
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

Re: Rotating an image within a graphic

Post by capellan » Tue Apr 23, 2019 8:14 pm

Hi Hermann,
You could try the following.
set the ink of the (filled/opaque) graphic to "blendDstOut".
put the image layered *on TOP* of the graphic.
set the ink of the image to "blendDstOver" (or "blendDstAtop").
Then don't rotate the image but set its angle (and may be its loc) and set its lockloc to false.
And set the points (and/or other properties) of the graphic.
Many Thanks for posting this alternate method for masking an image.
Scott Rossi posted long time ago a stack about masking techniques:
http://tactilemedia.com/blog/2015/11/04 ... g-objects/
(By the way, Scott reposted many of his stacks in this blog)

Although I am still looking for a way to redraw the graphic's backgroundpattern
without: 1) locking the screen, 2) visiting next card, 3)returning to previous card and
4) unlocking the screen. Only after this, the stack redraw the graphic's backgroundpattern.

Al

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 4141
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Rotating an image within a graphic

Post by richmond62 » Tue Apr 23, 2019 8:19 pm

One way, at least, to get a backGroundPattern redraw is to do 2 redraws a bit like this:

Code: Select all

on mouseUp
set the backGroundPattern of grc "fframe" to the id of img "bigBlackSquare"
set the backGroundPattern of grc "fframe" to the id of img "violin"
end mouseUp
So, if your backGroundPattern had been the image "violin" before you hit the button,
it would be refreshed to, say, a different state.

capellan
Posts: 629
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

Re: Rotating an image within a graphic

Post by capellan » Tue Apr 23, 2019 8:24 pm

That's a great idea! Previously, I have been setting
the background pattern to empty (producing a white
flash in the graphic) but now I could try something
different like creating two identical images and
rotating both at the same time. :D

Al

capellan
Posts: 629
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

Re: Rotating an image within a graphic

Post by capellan » Tue Apr 23, 2019 9:56 pm

After all Richmond's idea works!!!! :D

Richmond's idea of using another image as graphic's backpattern
works in the most unexpected way.

LiveCode could rotate the backpattern of a polygon graphic
(according to my tests) if the backpattern image is not
the first image of the stack.

Probably there is a bug in the IDE or the Engine that requires
a different explanation but it would require a lot more work
to uncover exactly where it is.

Here is a recipe to reproduce:

1) Download the compressed stack from the first post.

2) Uncompress and open the stack in the IDE

3) Duplicate the Violin image (not the graphic or the button)
Now the stack have two bitmap images.

4) Change the script of the first scrollbar to:

Code: Select all

on scrollbardrag x
   set the angle of img 1 to x
   set the backpattern of grc 1 to the id of img 1
   set the icon of btn 1 to the id of img 1
   set the loc of img 1 to "170,180"
end scrollbardrag
5) Change the script of the second scrollbar to:

Code: Select all

on scrollbardrag x
   set the angle of img 2 to x
   set the backpattern of grc 1 to the id of img 2
   set the icon of btn 1 to the id of img 2
   set the loc of img 2 to "200,210"
end scrollbardrag
In my own setup, the second scrollbar works fine but
the first scrollbar does not change the backpattern
of the vector graphic.

Please post your results to verify this.

Al

capellan
Posts: 629
Joined: Wed Aug 15, 2007 11:09 pm
Contact:

Re: Rotating an image within a graphic

Post by capellan » Thu May 02, 2019 1:33 am

I have reported this bug:

https://quality.livecode.com/show_bug.cgi?id=22037

If you could reproduce this bug in your own setup then
post your comments in the bug report.

Al

Post Reply

Return to “Multimedia”