BlackBerry - 在屏幕上绘制图像 [英] BlackBerry - draw image on the screen
问题描述
如何在屏幕上绘制特定大小和位置的png图像?
How to draw png images with specific size and position on the screen?
推荐答案
调整图片大小
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;
}
此函数将在下面的代码中使用.
This function will be used in the code below.
简单画图 http://img268.imageshack.us/img268/9918/bb8310.png
让我们以表格的方式绘制 9 张图像，图像的大小不同，但我们会将它们调整为 80x80 并将它们的边距设置为 10 像素.
Lets paint 9 images in a table way, images are different in size, but we will resize them to 80x80 and give them margins 10 px.
假设您的项目资源中有 9 个 png 图片.
Assuming you have 9 png images in your project resources.
- 加载图片
- 调整图像大小
- 在特定位置内的每个绘制事件上绘制图像
代码:
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);
}
}
}
}
简单地绘制图像 - 优化
看看Scr的paint()方法.每次刷新时，整个图像表都会重新绘制，这意味着每次绘制都会调用 9 个 drawImage.如果我们只是对这张表进行快照并在paint()方法中使用它会怎样?
Simply painting images - optimization
Take a look at paint() method of Scr. On every refresh the whole table of images is repainting, that means 9 drawImage call on every paint. What if we just take a shapshot of this table and use it in paint() method?
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);
}
}
你还可以优化，使用paintBackground()方法
以上所有内容都是关于使用 图形.有时它很棒 - 当您想显示一些动画或背景图像时.但是如果你想保持标准的 UI 用户体验，并使用图像作为字段怎么办?
All above is about painting images directly to screen using Graphics. Sometimes its great - when you want to display some animation or background image. But what if you want to keep standard UI user experience, and use images as a fields?
替代文字 http://img142.imageshack.us/img142/7485/bb83102.png
海峡方式是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]);
}
}
}
使用 BitmapField - 自定义布局
替代文字 http://img9.imageshack.us/img9/403/bb83103.png
要在 manager 中设置 BitmapFields 的自定义位置，您可以实现 manager自定义布局:
To set a custom positions of BitmapFields within manager, you can implement manager with custom 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;
}
}
}
这篇关于BlackBerry - 在屏幕上绘制图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
