canvas图像.docx
《canvas图像.docx》由会员分享，可在线阅读，更多相关《canvas图像.docx（10页珍藏版）》请在冰豆网上搜索。
canvas图像
/×
原点坐标转换应用
×/
importjavax.microedition.midlet.×;
importjavax.microedition.lcdui.×;
publicclasscanvasDemo5extendsMIDlet
{
Displaydisplay;
canvasTranslatecanvastranslate;
publiccanvasDemo5（）
{
canvastranslate=newcanvasTranslate（）;
display=Display.getDisplay（this）;
}
publicvoidstartApp（）
{
display.setCurrent（canvastranslate）;
}
publicvoidpauseApp（）{}
publicvoiddestroyApp（booleanunconditional）{}
classcanvasTranslateextendsCanvas
{
intgameaction=0;
intx;
inty;
booleanview;
ImagepictureImage;
publiccanvasTranslate（）
{
try{
pictureImage=Image.createImage（"/picture.png"）;
}catch（Exceptionex）{}
}
publicvoidkeyPressed（intkeyCode）
{
gameaction=getGameAction（keyCode）;
switch（gameaction）
{
caseUP:
view=false;
repaint（）;
break;
caseDOWN:
view=true;
//设置X,Y轴位移量
x=50;
y=60;
repaint（）;
break;
}
}
publicvoidpaint（Graphicsg）
{
g.setColor（0xFFFFFF）;
g.fillRect（0,0,getWidth（）,getHeight（））;
g.setColor（0）;
if（view）
{
//设置变换原点坐标，位移至（x,y）
g.translate（x,y）;
//取得X轴位移量
g.drawString（"X轴位移"+String.valueOf（g.getTranslateX（））,-10,-40,
Graphics.LEFT|Graphics.TOP）;
//取得Y轴位移量
g.drawString（"Y轴位移"+String.valueOf（g.getTranslateY（））,-10,-20,
Graphics.LEFT|Graphics.TOP）;
}
//保持图片都在原始点（0,0）显示
g.drawImage（pictureImage,0,0,Graphics.LEFT|Graphics.TOP）;
}
}
}
运行结果如图6-18所示。
图6-18
6.5.2图片切割法
第二个应用是Graphics类对图片处理的另一种方法，就是指定图片显示区域的位置，就像是图片被切割一样。
如示例6-9中根据设计者需求进行图片画面设置，可以调用方法：
lpublicvoidsetClip（intx,
inty,
intwidth,
intheight）
设置图片的切割范围，范围定义坐标为（x,y）、宽度width、高度height。
lpublicintgetClipX（）
取得切割图片的X坐标值。
lpublicintgetClipY（）
取得切割图片的Y坐标值。
lpublicintgetClipWidth（）
取得切割图片的宽度值。
lublicintgetClipHeight（）
取得切割图片的高度值。
lpublicvoidclipRect（intx,
inty,
intwidth,
intheight）
指定矩形区域与图片重叠处才显示，定义坐标为（x,y），指定矩形的宽度width、高度height。
示例6-9
/×
图片切割状态显示
×/
importjavax.microedition.midlet.×;
importjavax.microedition.lcdui.×;
importjava.util.Random;
publicclasscanvasDemo6extendsMIDlet
{
Displaydisplay;
canvasClipcanvasclip;
publiccanvasDemo6（）
{
canvasclip=newcanvasClip（）;
display=Display.getDisplay（this）;
}
publicvoidstartApp（）
{
display.setCurrent（canvasclip）;
}
publicvoidpauseApp（）{}
publicvoiddestroyApp（booleanunconditional）{}
classcanvasClipextendsCanvas
{
intgameaction=0;
intx=0;
inty=0;
intwidth;
intheight;
ImagepictureImage;
RandomviewRand;
publiccanvasClip（）
{
try{
pictureImage=Image.createImage（"/picture.png"）;
}catch（Exceptionex）{}
}
publicvoidkeyPressed（intkeyCode）
{
gameaction=getGameAction（keyCode）;
viewRand=newRandom（）;
x=（int）Math.abs（viewRand.nextInt（）%60）;
y=（int）Math.abs（viewRand.nextInt（）%60）;
switch（gameaction）
{
caseFIRE:
repaint（）;
break;
}
}
publicvoidpaint（Graphicsg）
{
g.setColor（0xFFFFFF）;
g.fillRect（0,0,getWidth（）,getHeight（））;
g.setColor（0）;
//设置切割区域
g.setClip（30,60,x,y）;
//取得切割画面的宽度
width=g.getClipWidth（）;
//取得切割画面的高度
height=g.getClipHeight（）;
g.drawImage（pictureImage,30,60,Graphics.LEFT|Graphics.TOP）;
//将切割后的动作应用到全屏幕画面
g.setClip（0,0,getWidth（）,getHeight（））;
g.drawString（"宽度:
"+width,50,10,Graphics.HCENTER|Graphics.TOP）;
g.drawString（"高度:
"+height,50,30,Graphics.HCENTER|Graphics.TOP）;
//进行矩形切割
g.clipRect（100,60,x,y）;
//取得切割画面的矩形宽度
width=g.getClipWidth（）;
//取得切割画面的矩形宽度
height=g.getClipHeight（）;
g.drawImage（pictureImage,100,60,Graphics.LEFT|Graphics.TOP）;
//将切割后的动作应用到全屏幕画面
g.setClip（0,0,getWidth（）,getHeight（））;
g.drawString（"矩形宽度:
"+width,120,10,Graphics.HCENTER|Graphics.TOP）;
g.drawString（"矩形高度:
"+height,120,30,Graphics.HCENTER|Graphics.TOP）;
g.drawRect（100,60,x,y）;
}
}
}
运行结果如图6-19所示。
图6-19
【说明】
运行切割画面后，请注意一定要将画面恢复原状。
也就是不管切割画面大小如何，最后一定要设g.setClip（0,0,getWidth（）,getHeight（）），除非设计游戏时有其他显示考虑。
6.5.3合成图片动画制作
第5章介绍过如何制作动画效果，当图片是为了缩小文件大小而合成整张时，程序编写也就会有所不同。
主要是将转换坐标方法与切割图片方法混合使用，达到显示动态图片的目的。
将第5章合成一整张图片的方法进行修改，如图6-20所示。
具体程序见示例6-10。
图6-20将图片组合成一张示意图
示例6-10
/×
整张图片制作成动画的应用
×/
importjavax.microedition.midlet.×;
importjavax.microedition.lcdui.×;
importjavax.microedition.io.×;
publicclasscanvasDemo7extendsMIDlet
{
Displaydisplay;
canvasCARcanvascar;
publiccanvasDemo7（）
{
canvascar=newcanvasCAR（）;
display=Display.getDisplay（this）;
}
publicvoidstartApp（）
{
display.setCurrent（canvascar）;
}
publicvoidpauseApp（）{}
publicvoiddestroyApp（booleanunconditional）{}
classcanvasCARextendsCanvas
{
intgameaction,running;
ImagecarImage;
goCargocar;
int[][]gorun={
{14,123},{14,113},{14,103},{14,93},{14,83},{14,73},
{14,63},{14,53},{14,43},{14,33},{14,23},{14,13},
{24,13},{34,13},{44,13},{54,13},{64,13},{74,13},
{84,13},{94,13},{104,13},{114,13},{124,13},{134,13},
{134,23},{134,33},{134,43},{134,53},{134,63},{134,73},
{134,83},{134,93},{134,103},{134,113},{134,123},{134,133},
{124,133},{114,133},{104,133},{94,133},{84,133},{74,133},
{64,133},{54,133},{44,133},{34,133},{24,133},{14,133}
};
int[]imagetype={
0,0,0,0,0,0,
0,0,0,0,0,1,
2,2,2,2,2,2,
2,2,2,2,2,3,
4,4,4,4,4,4,
4,4,4,4,4,5,
6,6,6,6,6,6,
6,6,6,6,6,7,
};
publiccanvasCAR（）
{
running=0;
try{
carImage=Image.createImage（"/car.png"）;
}catch（Exceptionex）{}
}
publicvoidkeyPressed（intkeyCode）
{
gameaction=getGameAction（keyCode）;
switch（gameaction）
{
caseUP:
break;
caseDOWN:
break;
caseLEFT:
break;
caseRIGHT:
break;
caseFIRE:
gocar=newgoCar（）;
gocar.start（）;
gocar=null;
break;
}
}
publicvoidpaint（Graphicsg）
{
g.setColor（0x90EE90）;
g.fillRect（0,0,getWidth（）,getHeight（））;
//转换坐标系
g.translate（gorun[running][0]-imagetype[running]×32,gorun[running][1]）;
//切割显示图片
g.setClip（imagetype[running]×32,0,32,32）;
//图片显示在屏幕上
g.drawImage（carImage,0,0,Graphics.LEFT|Graphics.TOP）;
//恢复图片的原点坐标系
g.translate（-gorun[running][0]+imagetype[running]×32,gorun[running][1]）;
}
//线程运行图片显示
classgoCarextendsThread
{
publicvoidrun（）
{
while（true）
try{
running++;
if（running>47）running=0;
repaint（）;
Thread.sleep（200）;
}catch（Exceptionex）{}
}
}
}
}
升级会员 