4、图片
该对象用于显示图片,代码如下:
JControls.PictureBox = Class.create(JControls.Object, {
picture:null,//图片数据
picAlpha:null,//t透明度
picState:null,//显示方式(flex,cut)
picPosition:null,//cut方式下,从该坐标开始截取图片数据
picSize:null,//cut方式下,截取图片的长宽
initialize:function ($super, argname, argP, argWH, argimage) {
$super(argname, argP, argWH);
if(argimage){
this.picture = argimage.data;
this.picSize={width:argimage.cellSize.width,height:argimage.cellSize.height};
}
this.picAlpha=1.0;
this.picState = "cut";
this.picPosition={x:0,y:0};
},
setPicture:function(image,position){//设置该对象图片属性
this.picture=image.data;
this.picPosition=position;
this.picSize={width:image.cellSize.width,height:image.cellSize.height};
return this;
},
showing:function ($super, x, y, w, h){//覆盖父类中showing函数
var _context=JForm.context;
if(this.picture){
_context.save();
_context.globalAlpha=this.alpha*this.picAlpha;
if (this.picState == "flex") {
_context.drawImage(this.picture, 0, 0, this.picture.width, this.picture.height, x, y, w, h);
}else if (this.picState == "cut") {
_context.drawImage(this.picture, this.picPosition.x, this.picPosition.y, this.picSize.width,
this.picSize.height, x, y, w, h);
}
_context.restore();
}
if (this.selected) {
_context.strokeStyle = JColor.red.data;
_context.lineWidth = 1;
_context.strokeRect(x + _context.lineWidth, y + _context.lineWidth,
w - _context.lineWidth*2, h - _context.lineWidth*2);
}
$super(x, y, w, h);//执行父类中showing函数
}
});
5、动画
该对象显示的动画由多张图组合而成,所以动画使用的图片是由多张小图合成的大图。
动画资源定义如下:
var ResourceData= {
Images:{
//path:文件相对路径,picNum:当前图片中宽和高包含的小图数,cellSize:小图片的宽和高,data:存放加载的图片数据。
ZS1:{path:"images/battle/ZS1.png", picNum:{WNum:4,HNum:8},cellSize:{width:81,height:81}, data:null}
},
Animation:{
//imageName:资源中图片的Key值,动画起始位置(小图),allPlayNum:动画小图数,GHz:播放频率
ZS1_battle:{imageName:"ZS1",beginPoint:{WNum:0,HNum:0},allPlayNum:4,GHz:3}
}
}
动画类代码如下:
JControls.AnimationBox = Class.create(JControls.Object, {
animationName:null,//动画资源key值
animationPlayNum:null,//当前要显示的动画图片编号
animationTime:null,//每次显示时计数加1
animationOffset:null,//偏移量
loop:null,//是否循环播放动画
stopPlayAnimation:null,//是否暂停播放动画
showing:function ($super, x, y, w, h) {
if (this.animationName) {
var animation = ResourceData.Animation[this.animationName];
var image = ResourceData.Images[animation.imageName];
var w1 = image.cellSize.width;
var h1 = image.cellSize.height;
var x1 = (animation.beginPoint.WNum + this.animationOffset.WNum + this.animationPlayNum) % image.picNum.WNum;
var y1 = animation.beginPoint.HNum + this.animationOffset.HNum + parseInt((animation.beginPoint.WNum + this.animationOffset.WNum + this.animationPlayNum) / image.picNum.WNum);
JForm.context.drawImage(image.data, w1 * x1, h1 * y1, w1, h1, x, y, w, h);
if(this.isHighLight){//绘制高亮图片
JForm.context.save();
JForm.context.globalCompositeOperation="lighter";
JForm.context.globalAlpha=this.alpha*0.2;
JForm.context.drawImage(image.data, w1 * x1, h1 * y1, w1, h1, x, y, w, h);
JForm.context.restore();
}
if (!this.stopPlayAnimation) {
this.animationTime++;
}
if (this.animationTime >= animation.GHz) {//当计数大于或等于动画频率时
this.animationPlayNum++;//要显示的动画图片编号加1,
if (this.animationPlayNum >= animation.allPlayNum) {
if (this.loop)this.animationPlayNum = 0;//循环播放
else this.remove();//已播放到末尾,删除该对象
}
this.animationTime = 0;//重置计数
}
}
$super( x, y, w, h);
},
setAnimation:function (animationName) {//设置动画资源
this.animationName = animationName;
return this;
},
initialize:function ($super, argname, argP, argWH, argAnimationName) {
$super(argname, argP, argWH);
this.animationName = argAnimationName;
this.animationPlayNum = 0;
this.animationTime = 0;
this.animationOffset = {WNum:0, HNum:0};
this.loop = true;
this.stopPlayAnimation = false;
}
});
6、容器
主要用于控制其他对象分组,便于控制。
实现代码如下:
JControls.Panel = Class.create(JControls.Object, {//从父类继承
closeButton:null,//关闭按钮
title:null,//显示标题的控件
isShowTitle:null,//是否显示标题栏
titleHeight:40,//标题栏高度
initialize:function ($super, argname, argP, argWH) {
$super(argname, argP, argWH);
this.isShowTitle=false;
this.titleHeight=40;
},
showTitle:function(title){
if(this.isShowTitle){
this.title.setText(title);
}else{
this.title=new JControls.Label(this.name+"_title",{x:0,y:0}).setSize({width:this.size.width,height:this.titleHeight})
.setText(title).setBGColor(JColor.blue).setFontSize(27).setTextBaseline("middle").setFontType("bold").setTextPos({x:20,y:0});
this.closeButton=new JControls.Button(this.name+"_closeButton",{x:this.size.width-60,y:0},{width:60,height:this.titleHeight})
.setBGColor(JColor.white);
this.closeButton.buttonLabel.setText("关闭").setFontColor(JColor.red).setFontSize(22);
this.closeButton.onClick=function(){
this.parent.visible=false;
this.parent.parent.show();
this.parent.onCloseButtonClick&&this.parent.onCloseButtonClick();
return true;
}
this.addControlInLast([this.title,this.closeButton]);
this.isShowTitle=true;
}
},
onCloseButtonClick:null,
beginShow:function ($super) {//覆盖父类中beginShow方法
$super();
if (this.parent&&this.isShowTitle)this.position.y +=this.titleHeight;
}
});