我们知道MIDP的图形用户界面分为两类,分别是高级图形用户界面和低级用户界面。一般来讲高级图形用户界面类使用起来比较方便,可移植性强,但是程序员对他的控制能力也很低,因为它们的界面表现是由底层控制的,而不是我们控制的。相比高级UI类,低级UI类则使用起来更难一些,但是控制能力更强,可以做出自己需要的界面。
Canvas和Graphics是我们必须熟练使用的两个类,分别代表了画布和画笔(事实上更丰富,姑且这么比喻)。而我们则是画画的人,而指导我们如何下笔的就是java doc了,再加上勤奋努力一定可以画出不错的界面。比如tabbed菜单,二级菜单等。这里我们讲述一个简单菜单的制作方式。
在画菜单的时候,需要考虑两面的问题,第一是计算相对位置,让菜单能够尽可能适应更多的机型,尽量少使用绝对值。例如画下面的菜单的时候
我们应该计算菜单的每个条目的高度,这些可以有Font的高度算出,当然你可以给条目留一些padding的距离。还应该计算条目的最宽值,毕竟每个条目的字数不一样。这样基本知道了整个菜单占的空间。最后还需要计算菜单在屏幕的位置。菜单的绘制如下所示:
public void paint(Graphics g){
//清除屏幕
int color = g.getColor();
g.setColor(0xFFFFFF);
g.fillRect(0,0,getWidth(),getHeight());
g.setColor(color);
//计算整个菜单的高度,宽度和(x,y)
int rectWidth = preferWidth;
int rectHeight = preferHeight * LABELS.length;
int x = (getWidth()-rectWidth)/2;
int y = (getHeight()-rectHeight)/2;
//画矩形
g.drawRect(x,y,rectWidth,rectHeight);
for(int i = 1;i<LABELS.length;i++){
g.drawLine(x,y+preferHeight*i,x+rectWidth,y+preferHeight*i);
}
//画菜单选项,并根据selected的值判断焦点
for(int j = 0;j<LABELS.length;j++){
if(selected == j){
g.setColor(0x6699cc);
g.fillRect(x+1,y+j*preferHeight+1,rectWidth-1,preferHeight-1);
g.setColor(color);
}
g.drawString(LABELS[j],x+8,y+j*preferHeight+4,Graphics.LEFT|Graphics.TOP);
}
}
第二个重要的问题是:焦点的切换,在高级UI类中,这是不需要我们处理的。但是使用Canvas制作菜单需要自己来处理焦点的移动,这里我们定义一个int类型变量selected,来记录焦点所在的菜单条目位置,也就是选择的索引。当用户按键的时候,我们在keyPressed()方法中判断用户的移动方向,对selected进行相关的加减运算,然后repaint()整个屏幕即可。
public void keyPressed(int keyCode){
//根据用户输入更新selected的值,并重新绘制屏幕
int action = this.getGameAction(keyCode);
switch(action){
case Canvas.FIRE:
printLabel(selected);
break;
case Canvas.DOWN:
selected = (selected+1)%4;
break;
case Canvas.UP:{
if(--selected < 0){
selected+=4;
}
break;
}
default:
break;
}
repaint();
serviceRepaints();
}
这样我们就制作出了一个基本的菜单,你还可以发挥想象给被选中的菜单增加动画效果。MenuCanvas的代码如下所示:
package com.j2medev.chapter3;
import javax.microedition.lcdui.*;
public class MenuCanvas extends Canvas{
//selected变量标记了焦点位置
private int selected = 0;
private int preferWidth = -1;
private int preferHeight = -1;
public static final int[] OPTIONS = {0,1,2,3};
public static final String[] LABELS={"New Game","Setttings","High Scores","Exit"};
public MenuCanvas() {
selected = OPTIONS[0];
//计算菜单选项的长度和高度值
Font f = Font.getDefaultFont();
for(int i = 0;i<LABELS.length;i++){
int temp = f.stringWidth(LABELS[i]);
if(temp > preferWidth){
preferWidth = temp;
}
}
preferWidth = preferWidth + 2*8;
preferHeight = f.getHeight()+2*4;
}
public void paint(Graphics g){
//清除屏幕
int color = g.getColor();
g.setColor(0xFFFFFF);
g.fillRect(0,0,getWidth(),getHeight());
g.setColor(color);
//计算整个菜单的高度,宽度和(x,y)
int rectWidth = preferWidth;
int rectHeight = preferHeight * LABELS.length;
int x = (getWidth()-rectWidth)/2;
int y = (getHeight()-rectHeight)/2;
//画矩形
g.drawRect(x,y,rectWidth,rectHeight);
for(int i = 1;i<LABELS.length;i++){
g.drawLine(x,y+preferHeight*i,x+rectWidth,y+preferHeight*i);
}
//画菜单选项,并根据selected的值判断焦点
for(int j = 0;j<LABELS.length;j++){
if(selected == j){
g.setColor(0x6699cc);
g.fillRect(x+1,y+j*preferHeight+1,rectWidth-1,preferHeight-1);
g.setColor(color);
}
g.drawString(LABELS[j],x+8,y+j*preferHeight+4,Graphics.LEFT|Graphics.TOP);
}
}
public void keyPressed(int keyCode){
//根据用户输入更新selected的值,并重新绘制屏幕
int action = this.getGameAction(keyCode);
switch(action){
case Canvas.FIRE:
printLabel(selected);
break;
case Canvas.DOWN:
selected = (selected+1)%4;
break;
case Canvas.UP:{
if(--selected < 0){
selected+=4;
}
break;
}
default:
break;
}
repaint();
serviceRepaints();
}
//showNotify()在paint()之前被调用
public void showNotify(){
System.out.println("showNotify() is called");
}
private void printLabel(int selected){
System.out.println(LABELS[selected]);
}
}
分享到:
相关推荐
该样例代码是 html转canvas canvas转图片 功能示例,代码下载完成后请在web服务器上发布后进行代码测试,否则会因跨域问题导致代码出错。 压缩包资源: canvas2image.js demo.html githug.txt html2canvas.min.js S1...
svg转canvas通过google的canvg.js插件转换,这是一个demo,有转换的每一个步奏比如:转换canvas按钮,转换img按钮,还有一个canvas下载按钮,会把canvas绘制的图形下载下来
android里面 canvas 转换成bitmap
4.4_屏幕坐标和canvas坐标的转换|使用鼠标和canvas交互|canvas项目综合实战|Canvas图形、动画、游戏开发
Canvas 3D旋转地球Canvas 3D旋转地球Canvas 3D旋转地球
svg转img所需 html2canvas方法,svg转canvas所需canvg方法 svg转img所需 html2canvas方法,svg转canvas所需canvg方法
将svg画布内容转成canvas,转换成png图片下载,基于IE
在用canvas将png图片转jpeg时,发现透明区域被填充成黑色。 代码如下: XML/HTML Code复制内容到剪贴板 <p>Canvas: <canvas u00a0id=canvas style></canvas> <p>Base64转码后的图片: ...
基于canvas的动态旋转星空特效,直接用浏览器打开就能看
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
使用hammer.js监听触控时产生的位移,并用Jcanvas.js画出来,从而实现在canvas画布内进行手势的拖拽 旋转 移动 缩放功能.点击按钮获取画布内的base64,并显示. 测试时请放在tomcat内,并手机访问. 不足:canvas加载...
HTML5之纯canvas实现转盘游戏,用到了canvas的旋转,平移,叠加,清除
字体绕中心一圈的写法,欢迎js初学者来下载。
2、将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,如:”image/webp”,”image/jpeg”,”image/png”。 3、最后将canvas转换为图片,显示在网页中。点击右键保存,就得到了不同格式的图片了。 ...
对应我canvas旋转小球这篇博客
通过使用canvas的画线,移动,旋转,绘制出五角星图案。无需计算坐标点,通过五角星的特性,进行canvas的变换,就能实现。
html5 canvas矩阵转换
html5 canvas实现海水慢慢升起效果 html5 canvas实现海水慢慢升起效果
H5 canvas制造3D旋转爱心表白
1、html5 2、地球旋转 3、canvas