Skip to content

Commit

Permalink
新增画板类-annieUI.DrawingBoard
Browse files Browse the repository at this point in the history
新增刮刮卡类-annieUI.ScratchCard
  • Loading branch information
anlun214 committed May 23, 2017
1 parent c194648 commit eb143be
Show file tree
Hide file tree
Showing 19 changed files with 751 additions and 65 deletions.
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
AnnieJS 支持ts和js两种开发语言环境,使用你熟悉的语言开发事半功倍。
AnnieJS 最大的优势就是短小精悍。全部核心代码压缩后不到70k,该有的功能都有了。
AnnieJS 需要结合Adobe 及 Flash2x工具使用才能发挥它最大的优势。
Flash2x 是一款优秀的Adobe Flash插件。
Flash2x 是一款优秀的Adobe Flash插件,与AnnieJS无缝集成
# 相比Flash自带的CreateJs有什么区别和优势
不得不承认CreateJs非常的优秀,但是它当初不是以移动优先的原则设计的,大量的逻辑和判断代码针对移动端没有任何意义。
CreateJs鼠标穿透非常让人头疼,上层的显示对象无法阻断事件会一直往下冒泡,非常讨厌。
Expand Down Expand Up @@ -70,6 +70,8 @@
下载的Falsh2xManager管理软件不要删除了,引擎及工具的更新和升级都需要用到,长期保留会有惊喜。
# AnnieJS 版本更新列表
## AnnieJS 1.1.1 版本
修复annie.Tween偶尔kill的时候会kill到其他tween对象的bug
修复annieUI.SlidePage在Android机上滑动困难的bug
修复在父级和子级都侦听了REMOVE_TO_STAGE事件时,并在事件回调里都执行了removeChild的相关方法会导致子级的REMOVE_TO_STAGE事件被多次调用的bug
优化矢量渲染
优化annieUI.ScrollPage和annieUI.ScorllList
Expand Down
2 changes: 1 addition & 1 deletion annie/display/Bitmap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ namespace annie {
s._bounds.width = bw;
s._bounds.height = bh;
//给webgl更新新
// s._cacheImg.updateTexture = true;
s._cacheImg.updateTexture = true;
}
s._updateInfo.UF = false;
s._updateInfo.UM = false;
Expand Down
2 changes: 1 addition & 1 deletion annie/display/Shape.ts
Original file line number Diff line number Diff line change
Expand Up @@ -786,7 +786,7 @@ namespace annie {
ctx.putImageData(imageData, 0, 0);
}
//给webgl更新新
// _canvas.updateTexture = true;
_canvas.updateTexture = true;
}
}
s._isNeedUpdate = false;
Expand Down
3 changes: 1 addition & 2 deletions annie/display/Stage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -257,8 +257,7 @@ namespace annie {
s.renderObj = new CanvasRender(s);
} else {
//webgl
trace("noSupport");
// s.renderObj = new WGRender(s);
s.renderObj = new WGRender(s);
}
s.renderObj.init();
window.addEventListener(resizeEvent, function (e: any) {
Expand Down
2 changes: 1 addition & 1 deletion annie/display/TextField.ts
Original file line number Diff line number Diff line change
Expand Up @@ -343,7 +343,7 @@ namespace annie {
s._cacheY = -10;
s._isNeedUpdate = false;
//给webgl更新新
// s._cacheImg.updateTexture = true;
s._cacheImg.updateTexture = true;
s._bounds.height = maxH;
s._bounds.width = maxW;
}
Expand Down
2 changes: 1 addition & 1 deletion annie/events/EventDispatcher.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ namespace annie {
export class AObject {
private _instanceId: number = 0;
protected _instanceType: string = "AObject";
private static _object_id = 0;
protected static _object_id = 0;

public constructor() {
this._instanceId = AObject._object_id++;
Expand Down
4 changes: 2 additions & 2 deletions annie/render/CanvasRender.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@ namespace annie {
s._ctx.setTransform(1, 0, 0, 1, 0, 0);
if (s._stage.bgColor != "") {
s._ctx.fillStyle = s._stage.bgColor;
s._ctx.fillRect(0, 0, c.width + 1, c.height + 1);
s._ctx.fillRect(0, 0, c.width, c.height);
} else {
s._ctx.clearRect(0, 0, c.width + 1, c.height + 1);
s._ctx.clearRect(0, 0, c.width, c.height);
}
}

Expand Down
51 changes: 25 additions & 26 deletions annie/render/WGRender.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@ namespace annie {
gl.clear(gl.COLOR_BUFFER_BIT);
s._textures.length = 0;
}

/**
* 开始有遮罩时调用
* @method beginMask
Expand Down Expand Up @@ -227,31 +226,31 @@ namespace annie {
let s = this;
//由于某些原因导致有些元件没来的及更新就开始渲染了,就不渲染,过滤它
if (target._cp)return;
let texture = target._cacheImg;
if (texture && texture.width > 0 && texture.height > 0) {
let textureSource = target._cacheImg;
if (textureSource && textureSource.width > 0 && textureSource.height > 0) {
let gl = s._ctx;
let gi: any;
if (texture.updateTexture && target._glInfo) {
if (textureSource.updateTexture && target._glInfo) {
gi = target._glInfo;
} else {
gi = {};
if (target.rect && !target._isCache) {
let tc: any = target.rect;
gi.x = tc.x / texture.width;
gi.y = tc.y / texture.height;
gi.w = (tc.x + tc.width) / texture.width;
gi.h = (tc.y + tc.height) / texture.height;
gi.x = tc.x / textureSource.width;
gi.y = tc.y / textureSource.height;
gi.w = (tc.x + tc.width) / textureSource.width;
gi.h = (tc.y + tc.height) / textureSource.height;
gi.pw = tc.width;
gi.ph = tc.height;
} else {
let cX: number = target._cacheX;
let cY: number = target._cacheY;
gi.x = cX / texture.width;
gi.y = cY / texture.height;
gi.w = (texture.width - cX) / texture.width;
gi.h = (texture.height - cY) / texture.height;
gi.pw = (texture.width - cX * 2);
gi.ph = (texture.height - cY * 2);
gi.x = cX / textureSource.width;
gi.y = cY / textureSource.height;
gi.w = (textureSource.width - cX) / textureSource.width;
gi.h = (textureSource.height - cY) / textureSource.height;
gi.pw = (textureSource.width - cX * 2);
gi.ph = (textureSource.height - cY * 2);
}
target._glInfo = gi;
}
Expand All @@ -275,7 +274,7 @@ namespace annie {
m.c, m.d, 0,
m.tx, m.ty, 1
]);
gl.uniform1i(s._uniformTexture, s.createTexture(texture));
gl.uniform1i(s._uniformTexture, s.createTexture(textureSource));
s.setBuffer(s._buffer, new Float32Array(vertices));
gl.uniform1f(s._uA, target.cAlpha);
gl.uniformMatrix3fv(s._pMI, false, s._pMatrix);
Expand All @@ -293,21 +292,21 @@ namespace annie {
return 0;
}

public createTexture(bitmapData: any): number {
public createTexture(textureSource: any): number {
let s = this;
let gl = s._ctx;
let tid: number = 0;
let needUpdate: boolean = true;
let isChanged: boolean = false;
if (bitmapData._texture) {
tid = bitmapData._tid;
if (textureSource._texture) {
tid = textureSource._tid;
//如果被占用则需要重新申请
if (s._textures[tid] != bitmapData) {
if (s._textures[tid] != textureSource) {
//更新tid
tid = s.getActiveId();
isChanged = true;
}
if (!bitmapData.updateTexture) {
if (!textureSource.updateTexture) {
needUpdate = false;
}
} else {
Expand All @@ -317,20 +316,20 @@ namespace annie {
if (needUpdate) {
let texture: any = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, bitmapData);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureSource);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
bitmapData._texture = texture;
textureSource._texture = texture;
} else {
if (isChanged) {
gl.bindTexture(gl.TEXTURE_2D, bitmapData._texture);
gl.bindTexture(gl.TEXTURE_2D, textureSource._texture);
}
}
bitmapData.updateTexture = false;
bitmapData._tid = tid;
s._textures[tid] = bitmapData;
textureSource.updateTexture = false;
textureSource._tid = tid;
s._textures[tid] = textureSource;
return tid;
}
}
Expand Down
91 changes: 91 additions & 0 deletions annie/ui/DrawingBoard.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
/**
* Created by anlun on 2017/5/24.
*/
/**
* @module annieUI
*/
namespace annieUI {
import Sprite = annie.Sprite;
/**
* 画板类
* @class annieUI.DrawingBoard
* @public
* @extends annie.Bitmap
* @since 1.1.1
*/
export class DrawingBoard extends annie.Bitmap {
private _ctx:any;
private _isMouseDown: boolean = false;
/**
* 半径
* @type {number}
*/
public drawRadius:number=10;
/**
* 颜色
* @type {string}
*/
public drawColor:any="#000";
/**
* 背景
* @type {string}
*/
public bgColor:string="";
/**
* 构造函数
* @param width 画板宽
* @param height 画板高
* @param bgColor 背景 默认透明
*/
constructor(width: number, height: number,bgColor: string="") {
super();
var s = this;
var bd=document.createElement("canvas");
bd.width=width;
bd.height=height;
s._ctx=bd.getContext("2d");
s.bgColor=bgColor;
s.clear();
s.bitmapData=bd;
var mouseDown = s.onMouseDown.bind(s);
var mouseMove = s.onMouseMove.bind(s);
var mouseUp = s.onMouseUp.bind(s);
s.addEventListener(annie.MouseEvent.MOUSE_DOWN, mouseDown);
s.addEventListener(annie.MouseEvent.MOUSE_OVER, mouseDown);
s.addEventListener(annie.MouseEvent.MOUSE_MOVE, mouseMove);
s.addEventListener(annie.MouseEvent.MOUSE_UP, mouseUp);
s.addEventListener(annie.MouseEvent.MOUSE_OUT, mouseUp);
}
private onMouseDown(e:annie.MouseEvent): void {
var s = this;
var ctx = s._ctx;
ctx.beginPath();
ctx.strokeStyle = s.drawColor;
ctx.lineWidth = s.drawRadius;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.moveTo(e.localX >> 0, e.localY >> 0);
s._isMouseDown = true;
};
private onMouseUp(e:annie.MouseEvent):void {
this._isMouseDown = false;
};
private onMouseMove(e:annie.MouseEvent):void{
var s = this;
if (s._isMouseDown) {
var ctx = s._ctx;
ctx.lineTo(e.localX >> 0, e.localY >> 0);
ctx.stroke();
}
};
public clear():void{
let s=this;
if (s.bgColor != "") {
s._ctx.fillStyle = s.bgColor;
s._ctx.fillRect(0, 0, s.bitmapData.width, s.bitmapData.height);
} else {
s._ctx.clearRect(0, 0, s.bitmapData.width, s.bitmapData.height);
}
}
}
}
30 changes: 30 additions & 0 deletions annie/ui/ScratchCard.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/**
* Created by anlun on 2017/5/24.
*/
/**
* Created by anlun on 2017/5/24.
*/
/**
* @module annieUI
*/
namespace annieUI {
/**
* 画板类
* @class annieUI.ScratchCard
* @public
* @extends annie.Sprite
* @since 1.1.1
*/
export class ScratchCard extends annie.Sprite {

/**
* 构造函数
* @param width 画板宽
* @param height 画板高
* @param bgColor 背景 默认透明
*/
constructor(width: number, height: number,color: string="") {
super();
}
}
}
14 changes: 7 additions & 7 deletions annie/ui/SlidePage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ namespace annieUI {
ts = mx;
lts=s.movingX;
}
if(Math.abs(ts)-Math.abs(lts)<1){
if(Math.abs(ts)-Math.abs(lts)<-1){
s._isBreak=true;
}
s.movingX=mx;
Expand Down Expand Up @@ -260,22 +260,22 @@ namespace annieUI {
* 滑动到指定页
* @method slideTo
* @public
* @since 1.0.3
* @param {number} index 页面索引
* @since 1.1.1
* @param {boolean} isNext 是向上还是向下
*/
public slideTo(isNext: boolean): void {
public slideTo(isNext: boolean):void{
var s = this;
if (s.isMoving || s.isMouseDown) {
if (s.isMoving) {
return;
}
if (isNext) {
if (s.currentPageIndex <s.listLen - 1) {
if (s.currentPageIndex <s.listLen - 1&&s.canSlideNext) {
s.currentPageIndex++;
} else {
return;
}
} else {
if (s.currentPageIndex > 0) {
if (s.currentPageIndex > 0&&s.canSlidePrev) {
s.currentPageIndex--;
} else {
return;
Expand Down
7 changes: 4 additions & 3 deletions annie/utils/Tween.ts
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ namespace annie {
return Tween.createTween(target, totalFrame, data, false);
}
private static createTween(target:any, totalFrame:number, data:any, isTo:boolean):number{
let tweenObj:any;
let tweenObj:Tween|any;
let len=Tween._tweenList.length;
for(let i=0;i<len;i++){
tweenObj= Tween._tweenList[i];
Expand All @@ -235,8 +235,9 @@ namespace annie {
}
len = Tween._tweenPool.length;
if (len > 0) {
tweenObj = Tween._tweenPool[0];
Tween._tweenPool.shift();
tweenObj = Tween._tweenPool.shift();
//考虑到对象池回收后需要变更id
tweenObj._instanceId = annie.AObject["_object_id"]++;
} else {
tweenObj = new TweenObj();
}
Expand Down
Loading

0 comments on commit eb143be

Please sign in to comment.