Add fade to rotating image javascript

I have managed to get a tating image working with the following javascript:
<script type="text/javascript">
(function() {
    var rotator = document.getElementById('rotator');
    var imageDir = '';
    var delayInSeconds = 5;
    var images = ['h-images/homepage.jpg', 'h-images/rentalspage.jpg', 'h-images/investpage.jpg'];
    var num = 0;
    var changeImage = function() {
        var len = images.length;
        rotator.src = imageDir + images[num++];
        if (num == len) {
            num = 0;
    setInterval(changeImage, delayInSeconds * 1000);
</script>
the page is www.helenmarino.com/test.html (you may have to refresh the page)
I am surprised I managed to get this far so any simple code added to make the images fade nicely would be greatly appreciated.
many thanks
Helen

Download the Cycle plug-in script and save it to your local site folder. I prefer to keep scripts in my Scripts folder but that's up to you.
http://jquery.malsup.com/cycle/download.html
jQuery has 3 basic parts to it:
the core code library which you ref in your <head>
the plug-in script & css (if any) which you ref in your <head>
the function code inside <script> tags -- I prefer to put this above closing </body> tag.
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script type="text/javascript" src="Scripts/jquery.cycle.all.latest.js"></script>
</head>
<body>
<div class="slideshow">
     <img src="image1.jpg" width="200" height="200" alt="description" />
     <img src="image2.jpg" width="200" height="200" alt="description" />
     <img src="image3.jpg" width="200" height="200" alt="description" />
     <img src="image4.jpg" width="200" height="200" alt="description" />
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
fx: 'fade'
</script>
</body>
That's all there is to it. If you want anything fancier, look at Cycle's More Demos & Examples near the bottom of their home page.
Nancy O.

Similar Messages

Rotating Image with Fade Effect

Ok looking to rotate an image with a fade effect; below is a rotating image code.
(Wanting this effect to be transitional and smooth. Transparency? Opacity?)
<script language="JavaScript">

</script>
Any ideas?

Here is the script I finally got working! It would have not came to me without your help guys!
<script>
var pictureWebPartName="Pictures"; // name of the picture library web part
var showThumbnails = true; //otherwise show full sized images
var randomImg = true; //set to true to show in random order
var useCustomLinks = false; //true to use second column as URL for picture clicks
var RotatingPicturesLoopTime = 5000; //2000 = 2 seconds
var imgToImgTransition = 1.0; //2 = 2 seconds
// don't change these
var selectedImg = 0;
var imgCache = [];
var imgTag;
function RotatingPictures()
imgTag = document.getElementById("RotatingImage");
//Find the picture web part and hide it
var Imgs = [];
var x = document.getElementsByTagName("TD"); // find all of the table cells
var LinkList;
var i=0;
for (i=0;i<x.length;i++)
if (x[i].title == pictureWebPartName)
// tables in tables in tables... ah SharePoint!
LinkList = x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
// hide the links list web part
LinkList.style.display="none";
break;
if (!LinkList)
document.all("RotatingImageMsg").innerHTML="Web Part '" + pictureWebPartName + "' not found!";
//Copy all of the links from the web part to our array
var links = LinkList.getElementsByTagName("TR") // find all of the rows
var url;
var len;
for (i=0;i<links.length;i++)
//if (links(i).id.match("row")!=null)
if (links[i].childNodes[0].className=="ms-vb2")
len=Imgs.length
Imgs[len]=[]
Imgs[len][0] = links[i].childNodes[0].childNodes[0].href;
if (useCustomLinks)
if (links[i].childNodes[1].childNodes.length>0)
{ Imgs[len][1] = links[i].childNodes[1].childNodes[0].href; }
else
{ Imgs[len][1] = "" }
if (Imgs.length==0)
document.all("RotatingImageMsg").innerHTML="No images found in web part '" + pictureWebPartName + "'!";
for (i = 0; i < Imgs.length; i++)
imgCache[i] = new Image();
imgCache[i].src = Imgs[i][0];
if (useCustomLinks)
imgCache[i].customlink=Imgs[i][1];
RotatingPicturesLoop();
// now show the pictures...
function RotatingPicturesLoop()
if (randomImg)
selectedImg=Math.floor(Math.random()*imgCache.length);
if (document.all){
imgTag.style.filter="blendTrans(duration=" + imgToImgTransition + ")";
imgTag.filters.blendTrans.Apply();
url=imgCache[selectedImg].src
if (useCustomLinks)
{ RotatingImageLnk.href=imgCache[selectedImg].customlink; }
else
{ RotatingImageLnk.href = url; }
if (showThumbnails)
// convert URLs to point to the thumbnails...
// from airshow%20pictures/helicopter.jpg
// to airshow%20pictures/_t/helicopter_jpg.jpg
url = revString(url);
c = url.indexOf(".");
url = url.substring(0,c) + "_" + url.substring(c+1,url.length);
c = url.indexOf("/");
url = url.substring(0,c) + "/t_" + url.substring(c,url.length);
url = revString(url) + ".jpg";
imgTag.src = url;
if (document.all){
imgTag.filters.blendTrans.Play();
selectedImg += 1;
if (selectedImg > (imgCache.length-1)) selectedImg=0;
setTimeout(RotatingPicturesLoop, RotatingPicturesLoopTime);
// utility function revString found here:
// http://www.java2s.com/Code/JavaScript/Language-Basics/PlayingwithStrings.htm
function revString(str) {
var retStr = "";
for (i=str.length - 1 ; i > - 1 ; i--){
retStr += str.substr(i,1);
return retStr;
// add our function to the SharePoint OnLoad event
_spBodyOnLoadFunctionNames.push("RotatingPictures");
</script>

<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height="125" width="160" align="center" valign="middle">
<a name="RotatingImageLnk" id="RotatingImageLnk" alt="click for larger picture">
<img src="/_layouts/images/dot.gif" name="RotatingImage" id="RotatingImage" border=0>
</a>
<span name="RotatingImageMsg" id="RotatingImageMsg"></span>
</td>
</tr>
</table>
</center>
Thanks again guys!

Rotating images fade-in

i managed to create a rotating image banner with the help from this website
http://www.communitymx.com/content/article.cfm?cid=651FF
but without the fade-in fade-out effect it doesn't look very nice. how can i make the images fade-in like in the below website
http://www.flipflopflo.co.uk/home
i found some help here
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
but (as i am not professional user) i dont understand what to do with the scripts shown there. for example on "Step 2" it says
"Step 2: Then, insert the following sample HTML for 2 sample Fade In slideshows:"
insert where?

free flash tutorials sites list here
http://www.links-mylinks.com/2007/10/flash-sites-free-tutorial-templates.html

How to add fade to a rotating banner?

I want to have a fade effect in between different images, but I don't know how to incorporate it. Could somebody modify this code or tell me how to modify this code so that it will fade in between images? Thank you very much.
Code

With jQuery Cycle, you can apply various transitions (including fadeIn) to your images.
http://jquery.malsup.com/cycle/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Rotated Images

When I download a picture to Desktop it transfers the picture to a folder called Rotated Images no matter which ISP I am using. It also happen if I drop an image /picture onto the desktop: it sits there apx 3 seconds then creates a Rotated Images folder & the picture is there rotated 90 degrees.
I have tried deleting the folder to Trash, emptying the Trash, and Restart. Same thing happens. Although there is no Rotated Images folder on the Desktop, as soon as I drop any image on the Desktop it creates an Rotated Images folder and the picture goes in there and rotates 90 degrees. It seemed to suddenly start. I don't believe I installed any app that would cause it to happen (I hadn't installed an app at the time it started).
I don't know if it was 'spammed' to my iMac -possibly?
When I use Spotlight it doesn't find Rotated Images except for the newly created folder on the Desktop.
Has anyone encountered this problem? Has anyone found a solution? It is confusing and annoying. I have to add it to iPhoto then rotate it and Revert to Original rotates back.
The work/around is to Rotate & Save in Photoshop, then Import to iPhoto. Bummer.
Thank you.

I meant to ask: Has anyone encountered this problem? Has anyone found a solution? It is confusing and annoying. I have to add it to iPhoto then rotate it and Revert to Original rotates back.
The work/around is to Rotate & Save in Photoshop, then Import to iPhoto. Bummer.
Thank you.

Rotate images DURING import

To be able to rotate images DURING import would be a nice feature. I can do this with Apple's Image Capture. They are imported wih the rotation I have requested, and this show in the icons too.
I like popping a folder open and view my images in icon view. I don't have to open a program at all. It's quick and efficent way to view my images, but also the orientation is correct right from the beginning with the original. Maybe one more step in the import process, for those of us who don't mind it, BUT it's also one more step I DON"T have to do in Lightroom, Photoshop, or any other program. And the rotataion in Lightroom are temporary to the eye anyway.
This is good feature/option to add to the import. Lightroom ROCKS. It just elimanted a multi-step, multi-software import process. Almost. The "rotate during import" feature would seal the deal. It's a big deal to me. Like the Apple Image Capture, you could place rotation icons on each image in the preview window. If you added that, man, solid gold!
thanks,
Craig

DW Harrison:
Sure, I get that, but I can understand how non-destructive editing is useful in image adjustments where later you may regret having added too much saturation in the reds, so you're glad you can go back to the original. But who wants a portrait image rotated in landscape orientation EVER? It's a personal preference, and, no, not a priority in my opinion.
Ian:
You may think your post was enlightening, but, perhaps to someone else. Surely not me. I've always known what the 'real cause' is -- some software, i.e. WEB BROWSWERS, ignore the EXIF tag. Hence, my question was more of a philosophical one: why have portrait images rotated sideways, only to have aware applications ON-THE-FLY rotate them according to the EXIF tag? Why not just have the original file re-written in different dimensions?
For that matter, I specifically spelled out 'why can't... [the file be] rewritten from 800x600 to 600x800'. Hence I find your response 'They will be if the rotation tag is set in the camera' pretty darn irrelevant. No, they WON'T be rewritten rotated. Only by Graphic Converter if you have the option selected, or other applications that don't come to mind right now.

Rotating images and links

I have a website that uses include commands to insert shtml files into different sections of my home page. I would like to have rotating images and text links in one of the include sections. For example, image one shows up with link to URL #1, then image two shows up with link to URL#2. Any thoughts on how to easily accomplish this? Would I use Flash, javascript?
Thanks,
Elliott

This one uses JavaScript.
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Rotate Image - iOS CameraUI

Hello!
I am trying to do the follow steps using CameraUI in iOS:
1. Take a photo
2. Show photo in the screen
3. Rotate this photo
4. Save the rotated photo in the CameraRoll
to do that i wrote the follow code:
Class Camera
import ……..;
private var camera:CameraUI;
private var roll:CameraRoll;
private var mpLoader:Loader;
private var mediaPromise:MediaPromise;
private var bitmapData:BitmapData;
private var loaderInfoData:LoaderInfo;
private var dataSource:IDataInput;
private var tempDir:File;
private var file:File;
private var mediaBytes:ByteArray;
private var ld:Loader;
private var stream:FileStream;
public function showCamera():void{
     if (CameraUI.isSupported){
          camera = new CameraUI();
          camera.addEventListener(MediaEvent.COMPLETE, onComplete);
          camera.addEventListener(Event.CANCEL,onCancel);
          mediaType = medType;
          camera.launch(MediaType.IMAGE);
private function onCancel(event:Event):void{
     dispatchEvent(event);
private function onComplete(event:MediaEvent):void{
     var cameraUI:CameraUI = event.target as CameraUI;
     cameraUI.removeEventListener(MediaEvent.COMPLETE, onComplete);
     cameraUI.removeEventListener(Event.CANCEL, onCameraUICanceled);
     mediaPromise = event.data;
     if(mediaPromise.isAsync){
          //Async systems(IOS)
          dataSource = mediaPromise.open();
          var eventSource:IEventDispatcher = dataSource as IEventDispatcher;
          eventSource.addEventListener(Event.COMPLETE, onMediaLoaded);
     }else{
          //Sync systems(android)
          file = mediaPromise.file;
          dispatchEvent(event);
private function onMediaLoaded(event:Event):void{
     mediaBytes = new ByteArray();
     dataSource.readBytes(mediaBytes);
     tempDir = File.createTempDirectory();
     var now:Date = new Date();
     var filename:String;
     filename = now.fullYear + now.month + now.day+now.hours + now.minutes + now.seconds + ".JPG";
     file = tempDir.resolvePath(filename);
     //writing temporal file to display image
     stream = new FileStream();
     stream.open(file,FileMode.WRITE);
     stream.writeBytes(mediaBytes);
     stream.close();
     if(file.exists){
          //go to process to get BitmapData for Add to CameraRoll
          mpLoader = new Loader();
      mpLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,onMediaLoadedBitmapData);
          mpLoader.loadBytes(mediaBytes);
private function onMediaLoadedBitmapData(event:Event):void{
     var loaderInfo:LoaderInfo = LoaderInfo(event.target);
     bitmapData = new BitmapData(loaderInfo.width,loaderInfo.height,false,0xFFFFFF);
     bitmapData.draw(loaderInfo.loader);
     //Image rotate process
     var matrix:Matrix = new Matrix();
     matrix.translate(-bitmapData.width / 2, -bitmapData.height / 2);
     matrix.rotate(90 * (Math.PI / 180));
     matrix.translate(bitmapData.height / 2, bitmapData.width / 2);
     var matriximage:BitmapData = new BitmapData(bitmapData.height, bitmapData.width, false, 0x00000000);
     matriximage.draw(bitmapData, matrix);
     mediaBytes = matriximage.getPixels(matriximage.rect);
     //I used the next code but doesn't work
     //var jpgencode:JPEGEncoder = new JPEGEncoder(85);
     //mediaBytes = jpgencode.encode(matriximage);
     bitmapData = matriximage;
     //Re-Writing image with rotate ByteArray
     stream.open(file,FileMode.WRITE);
     stream.writeBytes(mediaBytes);
     stream.close();
     //Add Rotate image to CameraRoll
     addingToCameraRoll();
public function addingToCameraRoll():void{
     var result:String="";
     if(CameraRoll.supportsAddBitmapData){
          if(bitmapData!=null){
                roll = new CameraRoll();
                roll.addEventListener(Event.COMPLETE,onCompleteAddBitMapData);
                roll.addBitmapData(bitmapData);
                var me:MediaEvent = new MediaEvent(MediaEvent.COMPLETE);
                dispatchEvent(me);
When I run my app, at the time when the image is copied to CameraRoll prompts an error:
Error #2044: Unhandled ErrorEvent:. text=Error #3004: Insufficient file space.
     at ....
Debugging and doign some test I found that the size of ByteArray "mediaBytes.bytesAvailable" (1162439) is shorter than "matriximage.getPixels(matriximage.rect)" (12582912), the images that was saved in CameraRoll is in the correct way, but the second file (temporal file) is not saved, and I can use the file to show it in the screen.
I want to know if exists another way to rotate and show and image in iOS or what I am doing wrong.

I have the same issue

Rotated images in timeline

How does Premiere Elements work?
I have rotated images that have been shot at different orientations in the Organizer.
When I insert these images into the timeline in Elements 9 the image reverts to its former orientation.
I thought the orientation would be preserved when copying from Organizer.
David

David,
Most image viewers, like Organizer, do not initially actually Rotate an image, but just add instructions to the metadata, indicating how to display the image. One must do a Save/Save_As to actually affect the pixels. This process differs, depending on the viewer used. In Bridge (the big-brother to Organizer, and shipping/installing with PS, AI, PrPro, InDesign, AE), one just does a Save/Save_As, depending on whether one wishes to physically overwrite the existing image. Then, the pixels are actually re-arranged. Not sure exactly how (or if) PrE's Organizer handles the physical re-arrangement of the pixels.
PrE (and PrPro) will read the pixels, and not the metadata for the display.
In the NLE (Non Linear Editor) programs, one would follow Neale's advice, and use the fixed Effect>Rotation.
Good luck,
Hunt

Rotating images

Hello,
I have created a website which displays an image and have added a button which when is clicked will rotate the image. The problem I am having is that the page seems to be loading before the image is updated and the non rotated image is still displayed on the page. I don't think this is a caching problem because I tried appending a unique name to the image source for each page refresh and the old image still appears.
The reason why I think that the page is refreshed before the image updated is because if I have a popup window to display before the page is refreshed and let it sit there for a short period of time the page refreshes correctly displaying the rotated image.
Is there any way to halt the browser from refreshing before my java class is completely done writing out the image? My java class that does the rotation is called from a javaservlet if that helps...
Thanks,
-- George

Ok, thats a little more info.
Funny, your the first person I ever heard of that is using velocity rather than a real web langauge.
Anyway, I think what your doing is confusing where and when what code should executed. Its a tremendously common misunderstanding.
If you use a java servlet to get your image names, your going to have to have the page (or part of the page in a frame, iframe or somthing equally lame ) reload.
If you want your page to have a different image load when somone hits a new link, then you can worry about vm code and getting servlet names, and you *wont use javascript.
If you want to have an image appear when you highlight a link or have time pass or somthing, then you will use javascript completely to do this, and you will only use VM to write the names and populate the javascript array.
~kullgen

How to make a button remain still while on top of a rotating image?

I've tried making an interactive menu that has a rotating image in the background and some buttons on top of that background. The background itself is in a JPanel and the button is added directly on that JPanel since the Panel occupies the entire frame. Now, the problem is that the button spins along with the rotated graphics X_X. So...any ideas?
Here's some of the code:
class EyE extends JPanel{
Image im;
public int angx=0;
MediaTracker tracker=new MediaTracker(this);
EyE(){
Toolkit ec=Toolkit.getDefaultToolkit();
im=ec.getImage("Graphics\\hcr1.png");
setPreferredSize(new Dimension (400,400));
setBackground(Color.BLACK);
JButton frog=new JButton("Jerry");
this.add(frog);
setOpaque(false);
setVisible(true);
public void paintComponent(Graphics ecr){
Graphics2D g2d=(Graphics2D)ecr;
tracker.addImage(im,1);
try{tracker.waitForID(1);}
catch(InterruptedException ie){}
//code for roatating image (really didn't want to use AffineTransform)
double cs=Math.cos(Math.toRadians(angx)),ss=Math.sin(Math.toRadians(angx));
g2d.rotate(Math.toRadians(angx));
double x2=(200*cs-200*ss),y2=(200*ss+200*cs);
double m,n,d,tetcs1,tetss1,tetcs2,tetss2,ang1,ang2;
d=(Math.sqrt(Math.pow((y2-200),2)+Math.pow((x2-200),2)));
tetcs1=d/(400*Math.sqrt(2));
tetss1=Math.sqrt(1-Math.pow(tetcs1,2));
tetcs2=(160000-Math.pow(d,2))/160000;
tetss2=Math.sqrt(1-Math.pow(tetcs2,2));
ang2=180-2*Math.toDegrees(Math.acos(tetcs1));
ang1=ang2+Math.toDegrees(Math.acos(tetcs1))-45;
n=d*(Math.sin(Math.toRadians(ang1)));
double g=Math.sin(Math.toRadians(ang1));
m=Math.sqrt(Math.pow(d,2)-Math.pow(n,2));
if(angx<=90)g2d.translate(m,-n);
else if(angx<=180)g2d.translate(-m,-n);
else if(angx<=270)g2d.translate(-n,-m);
else if(angx<=360)g2d.translate(-n,m);
//rotating code ends
g2d.drawImage(im, 0,0,400,400, this);
}

class EyE extends JPanel {
    Image im;
    public int angx=0;
    MediaTracker tracker=new MediaTracker(this);
    EyE(){
        Toolkit ec=Toolkit.getDefaultToolkit();
        im=ec.getImage("Graphics\\hcr1.png");
        setPreferredSize(new Dimension (400,400));
        setBackground(Color.BLACK);
        setOpaque(false);
        setVisible(true);
    public void paintComponent(Graphics ecr){
        Graphics2D g2d=(Graphics2D)ecr.create();
        tracker.addImage(im,1);
        try{tracker.waitForID(1);}
        catch(InterruptedException ie){}
//      code for roatating image (really didn't want to use AffineTransform)
        double cs=Math.cos(Math.toRadians(angx)),ss=Math.sin(Math.toRadians(angx));
        g2d.rotate(Math.toRadians(angx));
        double y2=(200*cs-200*ss),x2=(200*ss+200*cs);
        double m,n,d,tetcs1,tetss1,tetcs2,tetss2,ang1,ang2;
        d=(Math.sqrt(Math.pow((y2-200),2)+Math.pow((x2-200),2)));
        tetcs1=d/(400*Math.sqrt(2));
        tetss1=Math.sqrt(1-Math.pow(tetcs1,2));
        tetcs2=(160000-Math.pow(d,2))/160000;
        tetss2=Math.sqrt(1-Math.pow(tetcs2,2));
        ang2=180-2*Math.toDegrees(Math.acos(tetcs1));
        ang1=ang2+Math.toDegrees(Math.acos(tetcs1))-45;
        n=d*(Math.sin(Math.toRadians(ang1)));
        double g=Math.sin(Math.toRadians(ang1));
        m=Math.sqrt(Math.pow(d,2)-Math.pow(n,2));
        if(angx<=90)g2d.translate(m,-n);
        else if(angx<=180)g2d.translate(-m,-n);
        else if(angx<=270)g2d.translate(-n,-m);
        else if(angx<=360)g2d.translate(-n,m);
//      rotating code ends
        g2d.drawImage(im, 0,0,400,400, this);
        g2d.dispose();
        super.paintComponent(ecr);
}

Color changes after rotate image

Hi,
after rotate the "special" image (contains color space) the colors are changing.
1. original image
http://www.magix-photos.com/mediapool00/67/FC/3E/40/7E/74/11/D8/8F/AE/D1/59/D4/5B/F1/36/oma/10/C3E538A09A4211DBAE7417E2D45BF136.jpg
2. rotate 4 times (each time 90�)
http://www.magix-photos.com/mediapool00/67/FC/3E/40/7E/74/11/D8/8F/AE/D1/59/D4/5B/F1/36/oma/10/E19E8F409FBA11DBAFB497F6D45BF136.jpg
3. rotate 8 times (each time 90�)
http://www.magix-photos.com/mediapool00/67/FC/3E/40/7E/74/11/D8/8F/AE/D1/59/D4/5B/F1/36/oma/10/22BB57A09DEB11DB9E82003A55B2433B.jpg
I'm using JDK 1.5.0_09 and JAI 1.1.3-beta.
This is my code for rotate image:
    public BufferedImage rotateImage(BufferedImage image, int angle, int x, int y) {
        if (logger.isDebugEnabled()) {
            logger.debug("rotateImage(image, '" + angle + "', '" + x + "', '" + y + "') entered");
        if (image == null) {
            logger.error("rotateImage() failed, because image is null");
            return null;
        // convert angle in radius angle
        float radAngle = (float) ((float) angle * (Math.PI / 180.0F));
        BufferedImage newImage = null;
        RenderedOp render = null;
        try {
            ParameterBlock pb = new ParameterBlock();
            // image
            pb.addSource(image);
            // rotate about x point
            pb.add((float) x);
            // rotate about y point
            pb.add((float) y);
            // rotate with radius angle
            pb.add(radAngle);
            // interpolation
            pb.add(Interpolation.getInstance(Interpolation.INTERP_BILINEAR));
            // render
            render = JAI.create("Rotate", pb);
            newImage = render.getAsBufferedImage();
        catch (IllegalArgumentException iae) {
            logger.error("rotateImage() failed", iae);
            return null;
        finally {
            if (render != null) {
                // clean memory
                render.dispose();
        return newImage;
    }Has anybody idea what is going wrong?
Best Regards,
Rafal

You probably have Photoshop set up to not color manage. That is not a good idea. Look
here in the first images for how to set up your color management in photoshop.

Rotating Images with Java 2D

Im working on a program that requires the use of rotating images. I am using AffineTransformation to rotate and translate my BufferedImages. I have a problem when I rotate, I have a picture posted bellow of sample code and it's output.
http://i125.photobucket.com/albums/p64/roryfenrir/tankhelp.png
I four images, back (a solid color background, will not be solid in final product); tread and base, both get rotated together; and top, which rotates seperatly from the others.
My problem is that when an image is rotated, it takes a section of the background with it even though its a seperate image. Im wondering how to fix or get around this problem. Sorry if this is a dumb question but I would really like to get this down.
Thanks.
Edited by: RoryFenrir on Nov 11, 2008 4:13 PM

alright sorry, I didnt think that I needed to paste the whole code. Anyway I tried it out on some other computers and it didnt have this problem, both computers I used had java 6.0 and mine has 5.0 (Im pretty sure) so maybe thats the problem, but anyway I would still like to figure it out for this computer.
heres the code for the paintPanel, the program that runs it just adds it as a panel then sends arguments into the Overpaint method.
import java.awt.image.BufferedImage;
import javax.swing.*;
import java.io.*;
import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.geom.*;
public class TankPaint extends JPanel
static BufferedImage back;
private BufferedImage top,base,tread;
private Graphics g;
private int x,y,x2,y2,deg1,deg2;
//boolean dialog = false;
     public TankPaint(String back,String top,String base,String tread,int deg1,int deg2,int x,int y,int x2,int y2)
          super();
          try
               this.back = ImageIO.read(new File("Backgrounds\\"+back));
               this.top = ImageIO.read(new File("Images\\"+top));
               this.base = ImageIO.read(new File("Images\\"+base));
               this.tread = ImageIO.read(new File("Images\\"+tread));
          catch (IOException ex) {}
          this.x = x;
          this.y = y;
          this.x2 = x2;
          this.y2 = y2;
          this.deg1 = deg1;
          this.deg2 = deg2;
     public void paintComponent(Graphics g)
      Graphics2D g2d = (Graphics2D)g;
     AffineTransform transform = new AffineTransform();
          g2d.setColor(Color.red);
         g.drawImage(back, x2, y2, this);
         //g.drawImage(tread, x-125, y-125, this);
             //g.drawImage(base, x-125, y-125, this);
             //g.drawImage(top, x-125, y-125, this);
          transform.setToTranslation(x,y-5);
          transform.rotate(Math.toRadians(deg1),tread.getWidth()/2,tread.getHeight()/2-10);
         g2d.drawImage(tread, transform, this);
             g2d.drawImage(base, transform, this);
          transform.setToTranslation(x,y);
          transform.rotate(Math.toRadians(deg2),top.getWidth()/2,top.getHeight()/2-25);
             g2d.drawImage(top, transform, this);
public void overPaint(String back,String top,String base,String tread,int deg1,int deg2,int x,int y,int x2,int y2)
     try
          this.back = ImageIO.read(new File("Backgrounds\\"+back));
          this.top = ImageIO.read(new File("Images\\"+top));
          this.base = ImageIO.read(new File("Images\\"+base));
          //this.tread = ImageIO.read(new File("Images\\"+tread));
     catch (IOException ex) {System.out.println("Image Error");}
     this.x = x;
    this.y = y;
    this.x2 = x2;
    this.y2 = y2;
    this.deg1 = deg1;
     this.deg2 = deg2;
     repaint();
}

OCR without rotating image

In Acrobat 9 I can't find any setting to disable image automatic rotating of recognized documments by OCR.
I have usually very exact position of originals and I don't need this teature.
Besides, after this rotating by 0,0... degrees, Acrobat ruins image and add some linear deformates.
Please, help me how to make OCR without rotate image.

I am assuming that when you open your photo in CS5 that the layer is automatically locked?
If yes, then you can right click that layer and there is an option at the top called "Layer From Background...".
This unlocks that layer without having to duplicate it.
To rotate an image without changing dimensions of the actual photo? When you rotate an image the width and the height dimensions are switch depending on how you rotate.
Under Edit>>Transform, you will get 4 different options to rotate.
The rotate at the top is to manually rotate the image. The other rotates are presets which might be what your after.

Drag Moouse to rotate Image Smoothly

I have to write an application look somewhat like igoogle's eyes. When I click onto an image, then every where I drag my mouse, the image will rotate smoothly (does not move, rotate only) to where my mouse position is? Think of an arrow that will rotate to point to wherever my pointer's position is. Can you guy give me some advices on how to accomplish this. Thanks. I do know the basic things, like how to rotate image and how to move object using MouseMotionListener... Thank in advance.
Edited by: yunaeyes on May 20, 2009 5:40 PM

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.awt.image.BufferedImage;
import javax.swing.*;
public class SpinMe extends JPanel {
    BufferedImage image;
    double theta = 0;
    Point loc = new Point(140,150);
    public SpinMe() {
        initImage();
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D)g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
        AffineTransform at =
            AffineTransform.getTranslateInstance(loc.x, loc.y);
        double cx = image.getWidth()/2.0;
        double cy = image.getHeight()/2.0;
        at.rotate(theta, cx, cy);
        g2.drawRenderedImage(image, at);
    private void initImage() {
        // make an image
        int w = 80;
        int h = 30;
        int type = BufferedImage.TYPE_INT_RGB;
        image = new BufferedImage(w, h, type);
        // make an arrow
        double cx = w/2.0;
        double cy = h/2.0;
        double len = w;
        double barb = 25.0;
        double phi = Math.toRadians(20);
        Path2D.Double arrow = new Path2D.Double();
        arrow.moveTo(cx-len/2, cy);
        arrow.lineTo(cx+len/2, cy);
        double theta = Math.PI + phi;
        double x = cx+len/2 + barb*Math.cos(theta);
        double y = cy + barb*Math.sin(theta);
        arrow.lineTo(x, y);
        arrow.moveTo(cx+len/2, cy);
        theta = Math.PI - phi;
        x = cx+len/2 + barb*Math.cos(theta);
        y = cy + barb*Math.sin(theta);
        arrow.lineTo(x, y);
        // draw the arrow into the image
        Graphics2D g2 = image.createGraphics();
        g2.setBackground(new Color(210,210,240));
        g2.clearRect(0,0,w,h);
        g2.setPaint(Color.red);
        g2.draw(arrow);
        g2.dispose();
    public static void main(String[] args) {
        SpinMe test = new SpinMe();
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.add(test);
        f.setSize(400,400);
        f.setLocation(200,200);
        f.setVisible(true);
        test.addMouseListener(test.ma);
        test.addMouseMotionListener(test.ma);
    private double getTheta(Point p) {
        Point2D.Double ctr = getCenter();
        double dy = p.y - ctr.y;
        double dx = p.x - ctr.x;
        return Math.atan2(dy, dx);
    private Point2D.Double getCenter() {
        int iw = image.getWidth();
        int ih = image.getHeight();
        double cos = Math.abs(Math.cos(theta));
        double sin = Math.abs(Math.sin(theta));
        double width = iw*cos + ih*sin;
        double height = ih*cos + iw*sin;
        Point2D.Double p = new Point2D.Double();
        p.x = loc.x + width/2;
        p.y = loc.y + height/2;
        return p;
    /** Use MouseInputAdapter for j2se 1.5- */
    private MouseAdapter ma = new MouseAdapter() {
        double offsetTheta;
        public void mousePressed(MouseEvent e) {
            offsetTheta = getTheta(e.getPoint()) - theta;
        public void mouseDragged(MouseEvent e) {
            theta = getTheta(e.getPoint()) - offsetTheta;
            repaint();
}

Add fade to rotating image javascript

Similar Messages

Maybe you are looking for