BlackBerry - ziehen Sie das Bild auf dem Bildschirm

Gewusst wie: zeichnen von png-Grafiken mit bestimmter Größe und position auf dem Bildschirm?

InformationsquelleAutor | 2009-09-15

Verändern Bild

 public EncodedImage sizeImage(EncodedImage image, int width, 
  int height) {
  EncodedImage result = null;

  int currentWidthFixed32 = Fixed32.toFP(image.getWidth());
  int currentHeightFixed32 = Fixed32.toFP(image.getHeight());

  int requiredWidthFixed32 = Fixed32.toFP(width);
  int requiredHeightFixed32 = Fixed32.toFP(height);

  int scaleXFixed32 = Fixed32.div(currentWidthFixed32,
    requiredWidthFixed32);
  int scaleYFixed32 = Fixed32.div(currentHeightFixed32,
    requiredHeightFixed32);

  result = image.scaleImage32(scaleXFixed32, scaleYFixed32);
  return result;
 }

Diese Funktion wird verwendet werden, im code unten.

Einfach das malen von Bildern

Einfach das malen von Bildern http://img268.imageshack.us/img268/9918/bb8310.png

Lets paint 9 Bilder in einer Tabelle Weg, die Bilder sind unterschiedlich groß, aber wir ändern Sie auf 80x80 und geben Sie die Margen von 10 px.

Vorausgesetzt, Sie haben 9 png-Bilder in Ihrer Projekt-Ressourcen.

Bilder laden
Die Größe der Bilder
Malen Bilder auf jedem paint-Ereignis innerhalb bestimmter position

Code:

class Scr extends MainScreen {
 int mImgWidth = 80;
 int mImgHeight = 80;
 int mImgMargin = 10;
 String fileNames[] = { "1.png", "2.png", "3.png", "4.png", "5.png",
   "6.png", "7.png", "8.png", "9.png" };
 EncodedImage[] mImages;

 public Scr() {
 super();
  prepareImages();
 }

 private void prepareImages() {
  mImages = new EncodedImage[fileNames.length];
  for (int i = 0; i < fileNames.length; i++) {
   EncodedImage image = EncodedImage
     .getEncodedImageResource(fileNames[i]);
   mImages[i] = sizeImage(image, mImgWidth, mImgHeight);
  }
 }

 protected void paint(Graphics graphics) {
  paintImages(graphics);
  super.paint(graphics);
 }

 private void paintImages(Graphics graphics) {
  int scrWidth = Display.getWidth();
  int columns = scrWidth / (mImgWidth + 2 * mImgMargin);
  int rows = mImages.length / columns
    + (mImages.length % columns > 0 ? 1 : 0);
  for (int i = 0; i < rows; i++) {
   for (int j = 0; j < columns; j++) {
    int posX = j * (mImgWidth + 2 * mImgMargin) + mImgMargin;
    int posY = i * (mImgHeight + 2 * mImgMargin) + mImgMargin;
    EncodedImage image = mImages[i * columns + j];
    graphics.drawImage(posX, posY, mImgWidth, mImgHeight,
      image, 0, 0, 0);
   }
  }
 }
}

Einfach das malen von Bildern - Optimierung

Schauen Sie auf der paint () - Methode des Scr. Bei jeder Aktualisierung die ganze Tabelle mit den Bildern ist gezeichnet, das bedeutet, dass 9 drawImage-Aufruf auf jedem Lack. Was ist, wenn wir nur einen shapshot dieser Tabelle, und verwenden Sie es in paint () - Methode?

class ScrOpt extends MainScreen {
 int mScrWidth = Display.getWidth();
 int mScrHeight = Display.getHeight();
 int mImgWidth = 80;
 int mImgHeight = 80;
 int mImgMargin = 10;
 String fileNames[] = { "1.png", "2.png", "3.png", "4.png", "5.png",
   "6.png", "7.png", "8.png", "9.png" };
 EncodedImage[] mImages;
 Bitmap mImgTable;

 public ScrOpt() {
  super();
  prepareImages();
  mImgTable = paintImages();
 }

 private void prepareImages() {
  mImages = new EncodedImage[fileNames.length];
  for (int i = 0; i < fileNames.length; i++) {
   EncodedImage image = EncodedImage
     .getEncodedImageResource(fileNames[i]);
   mImages[i] = sizeImage(image, mImgWidth, mImgHeight);
  }
 }

 private Bitmap paintImages() {
  Bitmap result = new Bitmap(mScrWidth, mScrHeight);
  Graphics graphics = new Graphics(result);
  int scrWidth = mScrWidth;
  int columns = scrWidth / (mImgWidth + 2 * mImgMargin);
  int rows = mImages.length / columns
    + (mImages.length % columns > 0 ? 1 : 0);
  for (int i = 0; i < rows; i++) {
   for (int j = 0; j < columns; j++) {
    int posX = j * (mImgWidth + 2 * mImgMargin) + mImgMargin;
    int posY = i * (mImgHeight + 2 * mImgMargin) + mImgMargin;
    EncodedImage image = mImages[i * columns + j];
    graphics.drawImage(posX, posY, mImgWidth, mImgHeight, image, 0,
      0, 0);
   }
  }
  return result;
 }

 protected void paint(Graphics graphics) {  
  super.paint(graphics);
  graphics.drawBitmap(0, 0, mScrWidth, mScrHeight, mImgTable, 0, 0);
 }
}

Können Sie otimize es noch mehr, mit paintBackground () - Methode

Mit BitmapField

Alle oben über das malen von Bildern direkt auf den Bildschirm mit Grafik. Manchmal ist es toll - wenn Sie möchten, anzeigen eine animation oder hintergrund Bild. Aber was, wenn Sie wollen, behalten Sie standard-UI-Benutzeroberfläche, und verwenden Sie die Bilder als Felder?

alt-text http://img142.imageshack.us/img142/7485/bb83102.png

Der Straße Weg, ist ein BitmapField

class ScrBmpField extends MainScreen {
 int mImgWidth = 80;
 int mImgHeight = 80;
 int mImgMargin = 10;
 String fileNames[] = { "1.png", "2.png", "3.png", "4.png", "5.png",
   "6.png", "7.png", "8.png", "9.png" };
 BitmapField[] mBmpFields;

 public ScrBmpField() {
  super(VERTICAL_SCROLL|VERTICAL_SCROLLBAR);
  prepareBmpFields();  
 }

 private void prepareBmpFields() {
  mBmpFields = new BitmapField[fileNames.length];
  for (int i = 0; i < fileNames.length; i++) {
   EncodedImage image = EncodedImage
     .getEncodedImageResource(fileNames[i]);
   image = sizeImage(image, mImgWidth, mImgHeight);
   mBmpFields[i] = 
       new BitmapField(image.getBitmap(), FOCUSABLE|FIELD_HCENTER);
   mBmpFields[i].setMargin(mImgMargin, mImgMargin, 
       mImgMargin, mImgMargin);
   add(mBmpFields[i]);
  }
 }
}

Mit BitmapField - custom layout

alt-text http://img9.imageshack.us/img9/403/bb83103.png

Einen benutzerdefinierten Positionen der BitmapFields in-manager, die Sie umsetzen können manager mit benutzerdefinierten layout:

class ScrLayout extends MainScreen {
    int mScrWidth = Display.getWidth();
    int mScrHeight = Display.getHeight();
    int mImgWidth = 80;
    int mImgHeight = 80;
    int mImgMargin = 10;
    String fileNames[] = { "1.png", "2.png", "3.png", "4.png", "5.png",
            "6.png", "7.png", "8.png", "9.png" };
    BitmapField[] mBmpFields;

    public ScrLayout() {
        super(VERTICAL_SCROLL | VERTICAL_SCROLLBAR);
        prepareBmpFields();
    }

    private void prepareBmpFields() {
        LayoutManager manager = new LayoutManager();
        add(manager);
        mBmpFields = new BitmapField[fileNames.length];
        for (int i = 0; i < fileNames.length; i++) {
            EncodedImage image = EncodedImage
                    .getEncodedImageResource(fileNames[i]);
            image = sizeImage(image, mImgWidth, mImgHeight);
            mBmpFields[i] = 
                new BitmapField(image.getBitmap(), FOCUSABLE);
            manager.add(mBmpFields[i]);
        }
    }

    class LayoutManager extends VerticalFieldManager {
        public LayoutManager() {
            super(VERTICAL_SCROLL | VERTICAL_SCROLLBAR);
        }

        protected void sublayout(int width, int height) {
            int columns = mScrWidth / (mImgWidth + 2 * mImgMargin);
            for (int i = 0, j = 0; i < mBmpFields.length; i++) {
                int posX = j * (mImgWidth + 2 * mImgMargin) + mImgMargin;
                int posY = i * (mImgHeight + 2 * mImgMargin) + mImgMargin;
                Field field = mBmpFields[i];
                layoutChild(field, mImgWidth, mImgHeight);
                setPositionChild(field, posX, posY);

                j = (j == columns - 1) ? 0 : j + 1;
            }
            setExtent(mScrWidth, mScrHeight);
        }
        public int getPreferredWidth() {
            return mScrWidth;
        }
        public int getPreferredHeight() {
            return mScrHeight;
        }
    }
}

InformationsquelleAutor Maksym Gontar

4

Irgendwo in eine Initialisierungs-Funktion:
```
 Image myImage = Image.createImage("/myimage.png");
```
Und in der paint-Funktion des Bildes:
```
 g.drawImage(myImage, posX, posY, Graphics.TOP|Graphics.LEFT);
```
(wobei g das Graphics-Objekt erhalten Sie von der paint-Funktion)

edit: fixed kleine Fehler wie schon in den Kommentaren

völlig richtig! ändern wird es

InformationsquelleAutor Toad
2

Wenn Sie net.rim.- Gerät.api.system.PNGEncodedImage oder einer der anderen Klassen erweitert, von net.rim.- Gerät.api.system.EncodedImage können Sie die scaleImage32(int scaleX, int scaleY) - Methode (verfügbar in OS 4.2 und letzteren) um das Bild zu skalieren, um die Größe, die Sie wollen. Seien Sie sich aber bewusst, dass die scaleX-und scaleY, obwohl die Eingabe als int sind eigentlich net.rim.- Gerät.api.math.Fixed32 so wird das Bild bei halber Größe:
```
EncodedImage halfSize = myImage.scaleImage32(Fixed32.toFP(2), Fixed32.toFP(2));
```
Oder ein Bild zweimal original Größe:
```
EncodedImage twiceSize = myImage.scaleImage32(Fixed32.tenThouToFP(5000), Fixed32.tenThouToFP(5000));
```
einziger Nachteil ist, dass der code verwendet rim-Klassen und ist daher nicht portierbar auf andere java-Gerät.
Stimmt, aber deine Antwort erfüllt hier nur eine der beiden Anforderungen durch die OP.

InformationsquelleAutor Richard

private VerticalFieldManager mainBackVerticalFieldManager = null;

int deviceWidth = Display.getWidth();
int deviceHeight = Display.getHeight();    

mainBackVerticalFieldManager   = new VerticalFieldManager(VerticalFieldManager.NO_VERTICAL_SCROLL|VerticalFieldManager.NO_VERTICAL_SCROLLBAR){
        protected void paint(Graphics graphics) {
            graphics.clear();
            graphics.drawBitmap(0, 0, deviceWidth,deviceHeight,Bitmap.getBitmapResource(Constants.PURCHASE_SUMMARY_BG), 0,0);
            super.paint(graphics);
        };
    };

Hier können Sie deviceWidth und Höhe als Ihre Anforderung.

InformationsquelleAutor Dhiral Pandya

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.