Skip to content

F
fyge_for_tb
Commit c029f17f authored by wjf's avatar wjf
Browse files
Options

诸多修改

parent dd736250
Hide whitespace changes
Inline Side-by-side
Showing with 1400 additions and 129 deletions
.npmignore
View file @ c029f17f
...@@ -9,4 +9,5 @@ webpack.config.js ...@@ -9,4 +9,5 @@ webpack.config.js
.idea .idea
/debug /debug
/dist /dist
rollup.config.js rollup.config.js
\ No newline at end of file record.txt
\ No newline at end of file
build/FYGE.d.ts
View file @ c029f17f
...@@ -552,6 +552,114 @@ export class Point extends HashObject { ...@@ -552,6 +552,114 @@ export class Point extends HashObject {
set(x: number, y: number): void; set(x: number, y: number): void;
} }
export class ObservablePoint extends HashObject {
_x: number;
_y: number;
cb: any;
scope: any;
/**
* @param {Function} cb - 值改变时的回调
* @param {object} scope - 回调里的上下文this
* @param {number} [x=0] - x
* @param {number} [y=0] - y
*/
constructor(cb: Function, scope: any, x?: number, y?: number);
/**
* 设置xy
* @param {number} [x=0]
* @param {number} [y=0]
*/
set(x?: number, y?: number): void;
/**
* 从一个点复制xy
*
* @param {Point|ObservablePoint} point
*/
copy(point: Point | ObservablePoint): void;
x: number;
y: number;
destroy(): void;
}
export class Transform extends HashObject {
/**
* 世界矩阵
*/
worldMatrix: Matrix;
/**
* 本地矩阵
*/
localMatrix: Matrix;
/**
* 记录是否更新worldMatrix
*/
_worldID: number;
/**
* 记录是否和父级更新的_worldID一致
*/
_parentID: number;
/**
* 位置
*/
position: ObservablePoint;
/**
* 缩放
*/
scale: ObservablePoint;
/**
* 锚点
* 不改变坐标原点
*/
anchor: ObservablePoint;
/**
* 斜切值
*/
skew: ObservablePoint;
/**
* 弧度制
*/
_rotation: number;
_cx: number;
_sx: number;
_cy: number;
_sy: number;
/**
* 记录的本地坐标id
*/
_localID: number;
/**
* 当前本地坐标id
*/
_currentLocalID: number;
constructor();
/**
* 任何属性更改
* @private
*/
onChange(): void;
/**
* 当斜切改变时，先记录，优化计算
* @private
*/
updateSkew(): void;
/**
* 更新本地矩阵
*/
updateLocalMatrix(): void;
/**
* 更新世界矩阵,跟随父级修改
* @param {Transform} parentTransform - 父级矩阵
*/
updateWorldMatrix(parentTransform: Transform): void;
/**
* 弧度制
*
* @member {number}
*/
rotation: number;
destroy(): void;
}
export class Matrix extends HashObject { export class Matrix extends HashObject {
/** /**
* @property a * @property a
...@@ -752,6 +860,11 @@ export class Matrix extends HashObject { ...@@ -752,6 +860,11 @@ export class Matrix extends HashObject {
* @return {number[]} the newly created array which contains the matrix * @return {number[]} the newly created array which contains the matrix
*/ */
toArray(transpose?: boolean, out?: any): any; toArray(transpose?: boolean, out?: any): any;
/**
* 从矩阵数据转成tansform的数据
* @param transform
*/
decompose(transform: Transform): Transform;
/** /**
* A default (identity) matrix * A default (identity) matrix
* *
...@@ -769,35 +882,6 @@ export class Matrix extends HashObject { ...@@ -769,35 +882,6 @@ export class Matrix extends HashObject {
destroy(): void; destroy(): void;
} }
export class ObservablePoint extends HashObject {
_x: number;
_y: number;
cb: any;
scope: any;
/**
* @param {Function} cb - 值改变时的回调
* @param {object} scope - 回调里的上下文this
* @param {number} [x=0] - x
* @param {number} [y=0] - y
*/
constructor(cb: Function, scope: any, x?: number, y?: number);
/**
* 设置xy
* @param {number} [x=0]
* @param {number} [y=0]
*/
set(x?: number, y?: number): void;
/**
* 从一个点复制xy
*
* @param {Point|ObservablePoint} point
*/
copy(point: Point | ObservablePoint): void;
x: number;
y: number;
destroy(): void;
}
export class Rectangle extends HashObject { export class Rectangle extends HashObject {
/** /**
* 类型 * 类型
...@@ -943,85 +1027,6 @@ export class Rectangle extends HashObject { ...@@ -943,85 +1027,6 @@ export class Rectangle extends HashObject {
destroy(): void; destroy(): void;
} }
export class Transform extends HashObject {
/**
* 世界矩阵
*/
worldMatrix: Matrix;
/**
* 本地矩阵
*/
localMatrix: Matrix;
/**
* 记录是否更新worldMatrix
*/
_worldID: number;
/**
* 记录是否和父级更新的_worldID一致
*/
_parentID: number;
/**
* 位置
*/
position: ObservablePoint;
/**
* 缩放
*/
scale: ObservablePoint;
/**
* 锚点
* 不改变坐标原点
*/
anchor: ObservablePoint;
/**
* 斜切值
*/
skew: ObservablePoint;
/**
* 弧度制
*/
_rotation: number;
_cx: number;
_sx: number;
_cy: number;
_sy: number;
/**
* 记录的本地坐标id
*/
_localID: number;
/**
* 当前本地坐标id
*/
_currentLocalID: number;
constructor();
/**
* 任何属性更改
* @private
*/
onChange(): void;
/**
* 当斜切改变时，先记录，优化计算
* @private
*/
updateSkew(): void;
/**
* 更新本地矩阵
*/
updateLocalMatrix(): void;
/**
* 更新世界矩阵,跟随父级修改
* @param {Transform} parentTransform - 父级矩阵
*/
updateWorldMatrix(parentTransform: Transform): void;
/**
* 弧度制
*
* @member {number}
*/
rotation: number;
destroy(): void;
}
export const GroupD8: { export const GroupD8: {
E: number; E: number;
SE: number; SE: number;
...@@ -5539,6 +5544,330 @@ export class Stage extends Container { ...@@ -5539,6 +5544,330 @@ export class Stage extends Container {
export const GDispatcher: EventDispatcher; export const GDispatcher: EventDispatcher;
export class Shape extends Sprite {
canvas: HTMLCanvasElement;
context: CanvasRenderingContext2D;
dirty: boolean;
offsetX: number;
offsetY: number;
constructor();
/**
* 一个数组，每个元素也是一个数组[类型 0是属性,1是方法,名字 执行的属性或方法名,参数]
*
* @property _command
* @private
* @since 1.0.0
* @type {Array}
* @default []
*/
private _command;
/**
* @property _isBitmapStroke
* @private
* @since 1.0.0
*/
private _isBitmapStroke;
/**
* @property _isBitmapFill
* @private
* @since 1.0.0
*/
private _isBitmapFill;
/**
* 是否对矢量使用像素碰撞 默认开启
* @property hitTestByPixel
* @type {boolean}
* @default true
* @since 1.1.0
*/
hitTestByPixel: boolean;
/**
* 画一个带圆角的矩形
* @method drawRoundedRect
* @param {number} x 点x值
* @param {number} y 点y值
* @param {number} w 宽
* @param {number} h 高
* @param {number} rTL 左上圆角半径
* @param {number} rTR 右上圆角半径
* @param {number} rBL 左下圆角半径
* @param {number} rBR 右上圆角半径
* @public
* @since 1.0.0
*/
drawRoundedRect(x: number, y: number, w: number, h: number, rTL?: number, rTR?: number, rBL?: number, rBR?: number): void;
/**
* 绘画时移动到某一点
* @method moveTo
* @param {number} x
* @param {number} y
* @public
* @since 1.0.0
*/
moveTo(x: number, y: number): void;
/**
* 从上一点画到某一点,如果没有设置上一点，则上一点默认为(0,0)
* @method lineTo
* @param {number} x
* @param {number} y
* @public
* @since 1.0.0
*/
lineTo(x: number, y: number): void;
/**
*
* https://www.jianshu.com/p/e8ea5996cd79
* @method arcTo
* @param {number} x1 圆弧外一点，由它连接两切点
* @param {number} y1
* @param {number} x2 结束点 没啥用，设啥都是那个切点
* @param {number} y2
* @param {number} radius 半径
* @public
* @since 1.0.0
*/
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
/**
* 二次贝赛尔曲线
* 从上一点画二次贝赛尔曲线到某一点,如果没有设置上一点，则上一占默认为(0,0)
* @method quadraticCurveTo
* @param {number} cpX 控制点X
* @param {number} cpX 控制点Y
* @param {number} x 终点X
* @param {number} y 终点Y
* @public
* @since 1.0.0
*/
quadraticCurveTo(cpX: number, cpY: number, x: number, y: number): void;
/**
* 三次贝赛尔曲线
* 从上一点画二次贝赛尔曲线到某一点,如果没有设置上一点，则上一占默认为(0,0)
* @method bezierCurveTo
* @param {number} cp1X 1控制点X
* @param {number} cp1Y 1控制点Y
* @param {number} cp2X 2控制点X
* @param {number} cp2Y 2控制点Y
* @param {number} x 终点X
* @param {number} y 终点Y
* @public
* @since 1.0.0
*/
bezierCurveTo(cp1X: number, cp1Y: number, cp2X: number, cp2Y: number, x: number, y: number): void;
/**
* 闭合一个绘画路径
* @method closePath
* @public
* @since 1.0.0
*/
closePath(): void;
/**
* 画一个矩形
* @method drawRect
* @param {number} x
* @param {number} y
* @param {number} w
* @param {number} h
* @public
* @since 1.0.0
*/
drawRect(x: number, y: number, w: number, h: number): void;
/**
* 画一个弧形
* https://www.w3school.com.cn/tags/canvas_arc.asp
*
* @method drawArc
* @param {number} x 起始点x
* @param {number} y 起始点y
* @param {number} radius 半径
* @param {number} start 开始角度 弧度
* @param {number} end 结束角度 弧度
* @param {number} counterclockwise False = 顺时针，true = 逆时针
* @public
* @since 1.0.0
*/
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
/**
* 画一个圆
* @method drawCircle
* @param {number} x 圆心x
* @param {number} y 圆心y
* @param {number} radius 半径
* @param {boolean} counterclockwise 半径
* @public
* @since 1.0.0
*/
drawCircle(x: number, y: number, radius: number, counterclockwise?: boolean): void;
/**
* 画一个椭圆
* @method drawEllipse
* @param {number} x
* @param {number} y
* @param {number} w
* @param {number} h
* @public
* @since 1.0.0
*/
drawEllipse(x: number, y: number, w: number, h: number): void;
/**
* 清除掉之前所有绘画的东西
* @method clear
* @public
* @since 1.0.0
*/
clear(): void;
/**
* 开始绘画填充,如果想画的东西有颜色填充,一定要从此方法开始
* @method beginFill
* @param {number} color 颜色值 单色和RGBA格式
* @public
* @since 1.0.0
*/
beginFill(color: number, alpha?: number): void;
/**
* 线性渐变填充 一般给Flash2x用
* @method beginLinearGradientFill
* @param {Array} points 一组点
* @param {Array} colors 一组颜色值
* @public
* @since 1.0.0
*/
beginLinearGradientFill(points: any, colors: any): void;
/**
* 径向渐变填充 一般给Flash2x用
* @method beginRadialGradientFill
* @param {Array} points 一组点
* @param {Array} colors 一组颜色值
* @param {Object} matrixDate 如果渐变填充有矩阵变形信息
* @public
* @since 1.0.0
*/
beginRadialGradientFill: (points: any, colors: any) => void;
/**
* 位图填充 一般给Flash2x用
* @method beginBitmapFill
* @param {Image} image
* @param { Array} matrix
* @public
* @since 1.0.0
*/
beginBitmapFill(image: any, matrix: Array<number>): void;
private _fill;
/**
* 给线条着色
* @method beginStroke
* @param {number} color 颜色值
* @param {number} lineWidth 宽度
* @param {number} cap 线头的形状 0 butt 1 round 2 square 默认 butt
* @param {number} join 线与线之间的交接处形状 0 miter 1 bevel 2 round 默认miter
* @param {number} miter 正数,规定最大斜接长度,如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示 默认10
* @public
* @since 1.0.0
*/
beginStroke(color: number, lineWidth?: number, cap?: LINE_CAP, join?: LINE_JOIN, miter?: number, alpha?: number): void;
/**
* 画线性渐变的线条 一般给Flash2x用
* @method beginLinearGradientStroke
* @param {Array} points 一组点
* @param {Array} colors 一组颜色值
* @param {number} lineWidth
* @param {number} cap 线头的形状 0 butt 1 round 2 square 默认 butt
* @param {number} join 线与线之间的交接处形状 0 miter 1 bevel 2 round 默认miter
* @param {number} miter 正数,规定最大斜接长度,如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示 默认10
* @public
* @since 1.0.0
*/
beginLinearGradientStroke(points: Array<number>, colors: any, lineWidth?: number, cap?: LINE_CAP, join?: LINE_JOIN, miter?: number): void;
/**
* 画径向渐变的线条 一般给Flash2x用
* @method beginRadialGradientStroke
* @param {Array} points 一组点
* @param {Array} colors 一组颜色值
* @param {number} lineWidth
* @param {string} cap 线头的形状 butt round square 默认 butt
* @param {string} join 线与线之间的交接处形状 bevel round miter 默认miter
* @param {number} miter 正数,规定最大斜接长度,如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示 默认10
* @public
* @since 1.0.0
*/
beginRadialGradientStroke(points: Array<number>, colors: any, lineWidth?: number, cap?: LINE_CAP, join?: LINE_JOIN, miter?: number): void;
/**
* 线条位图填充 一般给Flash2x用
* @method beginBitmapStroke
* @param {Image} image
* @param {Array} matrix
* @param {number} lineWidth
* @param {string} cap 线头的形状 butt round square 默认 butt
* @param {string} join 线与线之间的交接处形状 bevel round miter 默认miter
* @param {number} miter 正数,规定最大斜接长度,如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示 默认10
* @public
* @since 1.0.0
*/
beginBitmapStroke(image: any, matrix: Array<number>, lineWidth?: number, cap?: LINE_CAP, join?: LINE_JOIN, miter?: number): void;
/**
* @method _stroke
* @param strokeStyle
* @param {number} width
* @param {number} cap
* @param {number} join
* @param {number} miter
* @private
* @since 1.0.0
*/
private _stroke;
/**
* 结束填充
* @method endFill
* @public
* @since 1.0.0
*/
endFill(): void;
/**
* 结束画线
* @method endStroke
* @public
* @since 1.0.0
*/
endStroke(): void;
/**
* 重写刷新
* @method update
* @public
* @since 1.0.0
*/
updateShape(): void;
/**
* @method _drawShape
* @param ctx
* @private
* @return {void}
*/
private _drawShape;
/**
* 重写hitTestPoint
* @method hitTestPoint
* @param {Point} globalPoint
* @param {boolean} isMouseEvent
* @return {any}
* @public
* @since 1.0.0
*/
hitTestPoint(globalPoint: Point, isMouseEvent?: boolean): DisplayObject;
/**
* 如果有的话,改变矢量对象的边框或者填充的颜色.
* @method changeColor
* @param {Object} infoObj
* @param {string|any} infoObj.fillColor 填充颜色值，如"#fff" 或者 "rgba(255,255,255,1)"或者是Shape.getGradientColor()方法返回的渐变对象;
* @param {string} infoObj.strokeColor 线条颜色值，如"#fff" 或者 "rgba(255,255,255,1)";
* @param {number} infoObj.lineWidth 线条的粗细，如"1,2,3...";
* @public
* @since 1.0.2
*/
changeColor(infoObj: any): void;
_renderCanvas(renderer: any): void;
_renderWebGL(renderer: any): void;
destroy(): void;
}
export class Mesh extends Container { export class Mesh extends Container {
/** /**
* 混色模式 * 混色模式
...@@ -6046,6 +6375,10 @@ export class BitmapText extends Container { ...@@ -6046,6 +6375,10 @@ export class BitmapText extends Container {
* 对齐方式 * 对齐方式
*/ */
textAlign: TEXT_ALIGN; textAlign: TEXT_ALIGN;
/**
* 垂直居中方式，暂时还没写,
*/
verticalAlign: VERTICAL_ALIGN;
/** /**
* 文本 * 文本
*/ */
......
build/fyge.min.js
View file @ c029f17f
This source diff could not be displayed because it is too large. You can view the blob instead.
build/fyge.min.js.map
View file @ c029f17f
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ c029f17f
{ {
"name": "fyge-tbmini", "name": "fyge-tbmini",
"version": "1.1.7", "version": "1.2.5",
"description": "淘宝小程序canvas渲染引擎", "description": "淘宝小程序canvas渲染引擎",
"main": "./build/fyge.min.js", "main": "./build/fyge.min.js",
"types": "./build/FYGE.d.ts", "types": "./build/FYGE.d.ts",
......
record.txt 0 → 100644
View file @ c029f17f
1.1.7 修改的文本y偏移4
1.1.8 版本，去掉fillText和strokeText的maxW
1.1.9 新加shape,待测试,hitTestByPixel有问题得为false先
1.2.0 sprite修改，置空纹理时执行updateLocalBoundsSelf
movieClip修改，alpha小于0.05不置visible为false，置alpha为0
matrix修改，添加decompose方法
const里的backupCanvas 赋值createCanvas()
1.2.1 bitmapText的单位图字文本一致但贴图不一致，不会修改，去掉_text判断
1.2.2 backupCanvas导出修改
1.2.3 Rectangle.createFromRects修改，忽略宽高都为0的矩形；（待测试）
sprite赋值texture时如果存在原贴图，且还没加载好，移除监听_onTextureUpdate；（待测试）
sprite获取texture时如果是空纹理，返回null；（待测试）
shape的_instanceType从ShapeNode改为Shape
1.2.4 button加上方法changeTexture，三个纹理属性都变成private （代码已改，还未build）
loader的loadImage里的url需要encodeURI一边，为了中文
shape在updateShaper的s.texture.update();后添加_onTextureUpdate
修改backupCanvas为getBackupCanvasCtx，返回上下文，（待测试）
1.2.5 shape的点击事件，清除颜色前要先setTransform(1,0,0,1,0,0);
//TODO
Texture里的removeAllHandlers是否考虑加上tex.removeEventListener = function _emptyOn() { /* empty */ };
bitmapText 考虑添加垂直居中方法（还没写）,简单起见，没标记过dirty，所以有需要先设置对齐，再设置text
graphics的canvas模式渲染，会把子级的也缓存，现在做法，尽量不在矢量图添加子级
\ No newline at end of file
src/2d/display/Sprite.ts
View file @ c029f17f
...@@ -461,13 +461,18 @@ export default class Sprite extends Container { ...@@ -461,13 +461,18 @@ export default class Sprite extends Container {
* @member {Texture} * @member {Texture}
*/ */
get texture() { get texture() {
return this._texture; return this._texture === Texture.EMPTY ? null : this._texture;//考虑是否返回null
} }
set texture(value) { set texture(value) {
if (this._texture === value) { if (this._texture === value) {
return; return;
} }
//如果存在原贴图，且还没加载好，移除监听_onTextureUpdate；
if (this._texture != Texture.EMPTY &&
this._texture != null &&
!this._texture.baseTexture.hasLoaded) this._texture.removeEventListener('update', this._onTextureUpdate, this);
//赋值
this._texture = value || Texture.EMPTY; this._texture = value || Texture.EMPTY;
this._textureID = -1; this._textureID = -1;
...@@ -479,8 +484,11 @@ export default class Sprite extends Container { ...@@ -479,8 +484,11 @@ export default class Sprite extends Container {
this._onTextureUpdate(); this._onTextureUpdate();
} }
else { else {
value.once('update', this._onTextureUpdate, this); value.once('update', this._onTextureUpdate, this);//只会监听一次
} }
} else {
//624修改。如果置空纹理，_localBoundsSelf置空
this.updateLocalBoundsSelf();
} }
} }
......
src/2d/events/Event.ts
View file @ c029f17f
...@@ -257,5 +257,6 @@ export class Event extends HashObject { ...@@ -257,5 +257,6 @@ export class Event extends HashObject {
s.target = target; s.target = target;
s._pd = false; s._pd = false;
s.type = type; s.type = type;
s.data = null;//最好加上，不然可能带上原来的数据
} }
} }
src/2d/graphics/Shape.ts 0 → 100644
View file @ c029f17f
import Texture from "../texture/Texture";
import { SCALE_MODES, LINE_CAP, LINE_JOIN } from "../const";
import { Rectangle, Point } from "../math";
import { DisplayObject } from "../display/DisplayObject";
import { hex2string, getRGBA, getGradientColor, getBackupCanvasCtx, getCanvasBitmapStyle, createCanvas } from "../utils";
import Sprite from "../display/Sprite";
/**
* 容器级的shape，和shape区别，继承sprite，hittest重写
* 矢量对象，
* 记录指令，对于复杂的不常绘制的图形，用canvas上下文的指令比较方便，比如消消乐项目时的格子地图
* 复杂路径，自己没法确定哪些区域该填充的时候，用canvas的api
* 支持pattern和渐变填充，与Graphic的纹理填充区分，不一致
* 不能用于webgl遮罩，暂不与gra做兼容，canvas形式可以
* 待测试
* anchorTexture被使用，尽量不手动修改
* 如要改锚点，用anchor
* @class Shape
* @extends Sprite
*/
export class Shape extends Sprite {
canvas: HTMLCanvasElement;
context: CanvasRenderingContext2D;
dirty: boolean;
offsetX: number;
offsetY: number;
constructor() {
super();
this._instanceType = "Shape";
var canvas = createCanvas();
canvas.width = 3;
canvas.height = 3;
this.texture = Texture.fromCanvas(canvas, 'shapeCanvas');
//baseTexture已自动缓存，把texture也缓存，key textCanvas+num 和baseTexture的一致
Texture.addToCache(this.texture, this.texture.baseTexture.textureCacheIds[0]);
this.canvas = canvas;
this.context = canvas.getContext("2d");
this.dirty = true;
}
/**
* 一个数组，每个元素也是一个数组[类型 0是属性,1是方法,名字 执行的属性或方法名,参数]
*
* @property _command
* @private
* @since 1.0.0
* @type {Array}
* @default []
*/
private _command: any = [];
/**
* @property _isBitmapStroke
* @private
* @since 1.0.0
*/
private _isBitmapStroke: Array<number>;
/**
* @property _isBitmapFill
* @private
* @since 1.0.0
*/
private _isBitmapFill: Array<number>;
/**
* 是否对矢量使用像素碰撞 默认开启
* @property hitTestByPixel
* @type {boolean}
* @default true
* @since 1.1.0
*/
public hitTestByPixel: boolean = true;
/**
* 画一个带圆角的矩形
* @method drawRoundedRect
* @param {number} x 点x值
* @param {number} y 点y值
* @param {number} w 宽
* @param {number} h 高
* @param {number} rTL 左上圆角半径
* @param {number} rTR 右上圆角半径
* @param {number} rBL 左下圆角半径
* @param {number} rBR 右上圆角半径
* @public
* @since 1.0.0
*/
public drawRoundedRect(
x: number,
y: number,
w: number,
h: number,
rTL: number = 0,
rTR?: number,
rBL?: number,
rBR?: number
): void {
let max = (w < h ? w : h) / 2;
let mTL = 0, mTR = 0, mBR = 0, mBL = 0;
if (rTR == undefined) rTR = rTL;
if (rBL == undefined) rBL = rTL;
if (rBR == undefined) rBR = rTL;
if (rTL < 0) {
rTL *= (mTL = -1);
}
if (rTL > max) {
rTL = max;
}
if (rTR < 0) {
rTR *= (mTR = -1);
}
if (rTR > max) {
rTR = max;
}
if (rBR < 0) {
rBR *= (mBR = -1);
}
if (rBR > max) {
rBR = max;
}
if (rBL < 0) {
rBL *= (mBL = -1);
}
if (rBL > max) {
rBL = max;
}
let c = this._command;
c[c.length] = [1, "moveTo", [x + w - rTR, y]];
c[c.length] = [1, "arcTo", [x + w + rTR * mTR, y - rTR * mTR, x + w, y + rTR, rTR]];
c[c.length] = [1, "lineTo", [x + w, y + h - rBR]];
c[c.length] = [1, "arcTo", [x + w + rBR * mBR, y + h + rBR * mBR, x + w - rBR, y + h, rBR]];
c[c.length] = [1, "lineTo", [x + rBL, y + h]];
c[c.length] = [1, "arcTo", [x - rBL * mBL, y + h + rBL * mBL, x, y + h - rBL, rBL]];
c[c.length] = [1, "lineTo", [x, y + rTL]];
c[c.length] = [1, "arcTo", [x - rTL * mTL, y - rTL * mTL, x + rTL, y, rTL]];
c[c.length] = [1, "closePath", []];
}
/**
* 绘画时移动到某一点
* @method moveTo
* @param {number} x
* @param {number} y
* @public
* @since 1.0.0
*/
public moveTo(x: number, y: number): void {
this._command[this._command.length] = [1, "moveTo", [x, y]];
}
/**
* 从上一点画到某一点,如果没有设置上一点，则上一点默认为(0,0)
* @method lineTo
* @param {number} x
* @param {number} y
* @public
* @since 1.0.0
*/
public lineTo(x: number, y: number): void {
this._command[this._command.length] = [1, "lineTo", [x, y]];
}
/**
*
* https://www.jianshu.com/p/e8ea5996cd79
* @method arcTo
* @param {number} x1 圆弧外一点，由它连接两切点
* @param {number} y1
* @param {number} x2 结束点 没啥用，设啥都是那个切点
* @param {number} y2
* @param {number} radius 半径
* @public
* @since 1.0.0
*/
public arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void {
this._command[this._command.length] = [1, "arcTo", [x1, y1, x2, y2, radius]];
}
/**
* 二次贝赛尔曲线
* 从上一点画二次贝赛尔曲线到某一点,如果没有设置上一点，则上一占默认为(0,0)
* @method quadraticCurveTo
* @param {number} cpX 控制点X
* @param {number} cpX 控制点Y
* @param {number} x 终点X
* @param {number} y 终点Y
* @public
* @since 1.0.0
*/
public quadraticCurveTo(cpX: number, cpY: number, x: number, y: number): void {
this._command[this._command.length] = [1, "quadraticCurveTo", [cpX, cpY, x, y]];
}
/**
* 三次贝赛尔曲线
* 从上一点画二次贝赛尔曲线到某一点,如果没有设置上一点，则上一占默认为(0,0)
* @method bezierCurveTo
* @param {number} cp1X 1控制点X
* @param {number} cp1Y 1控制点Y
* @param {number} cp2X 2控制点X
* @param {number} cp2Y 2控制点Y
* @param {number} x 终点X
* @param {number} y 终点Y
* @public
* @since 1.0.0
*/
public bezierCurveTo(cp1X: number, cp1Y: number, cp2X: number, cp2Y: number, x: number, y: number): void {
this._command[this._command.length] = [1, "bezierCurveTo", [cp1X, cp1Y, cp2X, cp2Y, x, y]];
}
/**
* 闭合一个绘画路径
* @method closePath
* @public
* @since 1.0.0
*/
public closePath(): void {
this._command[this._command.length] = [1, "closePath", []];
}
/**
* 画一个矩形
* @method drawRect
* @param {number} x
* @param {number} y
* @param {number} w
* @param {number} h
* @public
* @since 1.0.0
*/
public drawRect(x: number, y: number, w: number, h: number): void {
let c = this._command;
c[c.length] = [1, "moveTo", [x, y]];
c[c.length] = [1, "lineTo", [x + w, y]];
c[c.length] = [1, "lineTo", [x + w, y + h]];
c[c.length] = [1, "lineTo", [x, y + h]];
c[c.length] = [1, "closePath", []];
}
/**
* 画一个弧形
* https://www.w3school.com.cn/tags/canvas_arc.asp
*
* @method drawArc
* @param {number} x 起始点x
* @param {number} y 起始点y
* @param {number} radius 半径
* @param {number} start 开始角度 弧度
* @param {number} end 结束角度 弧度
* @param {number} counterclockwise False = 顺时针，true = 逆时针
* @public
* @since 1.0.0
*/
public arc(
x: number,
y: number,
radius: number,
startAngle: number,
endAngle: number,
counterclockwise: boolean = false
): void {
this._command[this._command.length] = [1, "arc", [x, y, radius, startAngle, endAngle, counterclockwise]];
}
/**
* 画一个圆
* @method drawCircle
* @param {number} x 圆心x
* @param {number} y 圆心y
* @param {number} radius 半径
* @param {boolean} counterclockwise 半径
* @public
* @since 1.0.0
*/
public drawCircle(x: number, y: number, radius: number, counterclockwise: boolean = false): void {
this._command[this._command.length] = [1, "arc", [x, y, radius, 0, 2 * Math.PI, counterclockwise]];
}
/**
* 画一个椭圆
* @method drawEllipse
* @param {number} x
* @param {number} y
* @param {number} w
* @param {number} h
* @public
* @since 1.0.0
*/
public drawEllipse(x: number, y: number, w: number, h: number): void {
let k = 0.5522848;
let ox = (w / 2) * k;
let oy = (h / 2) * k;
let xe = x + w;
let ye = y + h;
let xm = x + w / 2;
let ym = y + h / 2;
let c = this._command;
c[c.length] = [1, "moveTo", [x, ym]];
c[c.length] = [1, "bezierCurveTo", [x, ym - oy, xm - ox, y, xm, y]];
c[c.length] = [1, "bezierCurveTo", [xm + ox, y, xe, ym - oy, xe, ym]];
c[c.length] = [1, "bezierCurveTo", [xe, ym + oy, xm + ox, ye, xm, ye]];
c[c.length] = [1, "bezierCurveTo", [xm - ox, ye, x, ym + oy, x, ym]];
}
/**
* 清除掉之前所有绘画的东西
* @method clear
* @public
* @since 1.0.0
*/
public clear(): void {
let s: Shape = this;
s._command = [];
s.dirty = true;
}
/**
* 开始绘画填充,如果想画的东西有颜色填充,一定要从此方法开始
* @method beginFill
* @param {number} color 颜色值 单色和RGBA格式
* @public
* @since 1.0.0
*/
public beginFill(color: number, alpha: number = 1): void {
var sColor = getRGBA(hex2string(color), alpha);
this._fill(sColor);
}
/**
* 线性渐变填充 一般给Flash2x用
* @method beginLinearGradientFill
* @param {Array} points 一组点
* @param {Array} colors 一组颜色值
* @public
* @since 1.0.0
*/
public beginLinearGradientFill(points: any, colors: any): void {
this._fill(getGradientColor(points, colors));
}
/**
* 径向渐变填充 一般给Flash2x用
* @method beginRadialGradientFill
* @param {Array} points 一组点
* @param {Array} colors 一组颜色值
* @param {Object} matrixDate 如果渐变填充有矩阵变形信息
* @public
* @since 1.0.0
*/
public beginRadialGradientFill = function (points: any, colors: any) {
this._fill(getGradientColor(points, colors));
};
/**
* 位图填充 一般给Flash2x用
* @method beginBitmapFill
* @param {Image} image
* @param { Array} matrix
* @public
* @since 1.0.0
*/
public beginBitmapFill(image: any, matrix: Array<number>): void {
let s = this;
if (matrix) {
s._isBitmapFill = matrix;
}
s._fill(getCanvasBitmapStyle(image));
}
private _fill(fillStyle: any): void {
let c = this._command;
c[c.length] = [0, "fillStyle", fillStyle];
c[c.length] = [1, "beginPath", []];
this.dirty = true;
}
/**
* 给线条着色
* @method beginStroke
* @param {number} color 颜色值
* @param {number} lineWidth 宽度
* @param {number} cap 线头的形状 0 butt 1 round 2 square 默认 butt
* @param {number} join 线与线之间的交接处形状 0 miter 1 bevel 2 round 默认miter
* @param {number} miter 正数,规定最大斜接长度,如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示 默认10
* @public
* @since 1.0.0
*/
public beginStroke(
color: number,
lineWidth: number = 1,
cap: LINE_CAP = LINE_CAP.BUTT,
join: LINE_JOIN = LINE_JOIN.MITER,
miter: number = 0,
alpha: number = 1
): void {
var sColor = getRGBA(hex2string(color), alpha);
this._stroke(sColor, lineWidth, cap, join, miter);
}
/**
* 画线性渐变的线条 一般给Flash2x用
* @method beginLinearGradientStroke
* @param {Array} points 一组点
* @param {Array} colors 一组颜色值
* @param {number} lineWidth
* @param {number} cap 线头的形状 0 butt 1 round 2 square 默认 butt
* @param {number} join 线与线之间的交接处形状 0 miter 1 bevel 2 round 默认miter
* @param {number} miter 正数,规定最大斜接长度,如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示 默认10
* @public
* @since 1.0.0
*/
public beginLinearGradientStroke(
points: Array<number>,
colors: any,
lineWidth: number = 1,
cap: LINE_CAP = LINE_CAP.BUTT,
join: LINE_JOIN = LINE_JOIN.MITER,
miter: number = 10
): void {
this._stroke(getGradientColor(points, colors), lineWidth, cap, join, miter);
}
/**
* 画径向渐变的线条 一般给Flash2x用
* @method beginRadialGradientStroke
* @param {Array} points 一组点
* @param {Array} colors 一组颜色值
* @param {number} lineWidth
* @param {string} cap 线头的形状 butt round square 默认 butt
* @param {string} join 线与线之间的交接处形状 bevel round miter 默认miter
* @param {number} miter 正数,规定最大斜接长度,如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示 默认10
* @public
* @since 1.0.0
*/
public beginRadialGradientStroke(
points: Array<number>,
colors: any,
lineWidth: number = 1,
cap: LINE_CAP = LINE_CAP.BUTT,
join: LINE_JOIN = LINE_JOIN.MITER,
miter: number = 10
) {
this._stroke(getGradientColor(points, colors), lineWidth, cap, join, miter);
};
/**
* 线条位图填充 一般给Flash2x用
* @method beginBitmapStroke
* @param {Image} image
* @param {Array} matrix
* @param {number} lineWidth
* @param {string} cap 线头的形状 butt round square 默认 butt
* @param {string} join 线与线之间的交接处形状 bevel round miter 默认miter
* @param {number} miter 正数,规定最大斜接长度,如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示 默认10
* @public
* @since 1.0.0
*/
public beginBitmapStroke(
image: any,
matrix: Array<number>,
lineWidth: number = 1,
cap: LINE_CAP = LINE_CAP.BUTT,
join: LINE_JOIN = LINE_JOIN.MITER,
miter: number = 10
): void {
let s = this;
if (matrix) {
s._isBitmapStroke = matrix;
}
s._stroke(getCanvasBitmapStyle(image), lineWidth, cap, join, miter);
}
/**
* @method _stroke
* @param strokeStyle
* @param {number} width
* @param {number} cap
* @param {number} join
* @param {number} miter
* @private
* @since 1.0.0
*/
private _stroke(strokeStyle: any, width: number, cap: LINE_CAP, join: LINE_JOIN, miter: number): void {
let c = this._command;
c[c.length] = [0, "lineWidth", width];
c[c.length] = [0, "lineCap", cap];
c[c.length] = [0, "lineJoin", join];
c[c.length] = [0, "miterLimit", miter];
c[c.length] = [0, "strokeStyle", strokeStyle];
c[c.length] = [1, "beginPath", []];
this.dirty = true;
}
/**
* 结束填充
* @method endFill
* @public
* @since 1.0.0
*/
public endFill(): void {
let s = this;
let c = s._command;
let m = s._isBitmapFill;
if (m) {
c[c.length] = [2, "setTransform", m];
}
c[c.length] = ([1, "fill", []]);
if (m) {
s._isBitmapFill = null;
}
}
// protected isUsedToMask: boolean = false;
/**
* 结束画线
* @method endStroke
* @public
* @since 1.0.0
*/
public endStroke(): void {
let s = this;
let c = s._command;
let m = s._isBitmapStroke;
if (m) {
//如果为2则还需要特别处理
c[c.length] = [2, "setTransform", m];
}
c[c.length] = ([1, "stroke", []]);
if (m) {
s._isBitmapStroke = null;
}
}
/**
* 重写刷新
* @method update
* @public
* @since 1.0.0
*/
public updateShape(): void {
let s: Shape = this;
if (!s.visible) return;
if (!s.dirty) return;
s.dirty = false;
//更新缓存
let cLen: number = s._command.length;
let leftX: number;
let leftY: number;
let buttonRightX: number;
let buttonRightY: number;
let i: number;
//确定是否有数据,如果有数据的话就计算出缓存图的宽和高
let data: any;
let lastX = 0;
let lastY = 0;
let lineWidth = 0;
for (i = 0; i < cLen; i++) {
data = s._command[i];
if (data[0] == 1) {
if (data[1] == "moveTo" || data[1] == "lineTo" || data[1] == "arcTo" || data[1] == "bezierCurveTo") {
if (leftX == undefined) {
leftX = data[2][0];
}
if (leftY == undefined) {
leftY = data[2][1];
}
if (buttonRightX == undefined) {
buttonRightX = data[2][0];
}
if (buttonRightY == undefined) {
buttonRightY = data[2][1];
}
if (data[1] == "bezierCurveTo") {
leftX = Math.min(leftX, data[2][0], data[2][2], data[2][4]);
leftY = Math.min(leftY, data[2][1], data[2][3], data[2][5]);
buttonRightX = Math.max(buttonRightX, data[2][0], data[2][2], data[2][4]);
buttonRightY = Math.max(buttonRightY, data[2][1], data[2][3], data[2][5]);
lastX = data[2][4];
lastY = data[2][5];
} else {
leftX = Math.min(leftX, data[2][0]);
leftY = Math.min(leftY, data[2][1]);
buttonRightX = Math.max(buttonRightX, data[2][0]);
buttonRightY = Math.max(buttonRightY, data[2][1]);
lastX = data[2][0];
lastY = data[2][1];
}
} else if (data[1] == "quadraticCurveTo") {
//求中点
let mid1X = (lastX + data[2][0]) * 0.5;
let mid1Y = (lastY + data[2][1]) * 0.5;
let mid2X = (data[2][0] + data[2][2]) * 0.5;
let mid2Y = (data[2][1] + data[2][3]) * 0.5;
if (leftX == undefined) {
leftX = mid1X;
}
if (leftY == undefined) {
leftY = mid1Y;
}
if (buttonRightX == undefined) {
buttonRightX = mid1X;
}
if (buttonRightY == undefined) {
buttonRightY = mid1Y;
}
leftX = Math.min(leftX, mid1X, mid2X, data[2][2]);
leftY = Math.min(leftY, mid1Y, mid2Y, data[2][3]);
buttonRightX = Math.max(buttonRightX, mid1X, mid2X, data[2][2]);
buttonRightY = Math.max(buttonRightY, mid1Y, mid2Y, data[2][3]);
lastX = data[2][2];
lastY = data[2][3];
} else if (data[1] == "arc") {
let yuanPointX = data[2][0];
let yuanPointY = data[2][1];
let radio = data[2][2];
let yuanLeftX = yuanPointX - radio;
let yuanLeftY = yuanPointY - radio;
let yuanBRX = yuanPointX + radio;
let yuanBRY = yuanPointY + radio;
if (leftX == undefined) {
leftX = yuanLeftX;
}
if (leftY == undefined) {
leftY = yuanLeftY;
}
if (buttonRightX == undefined) {
buttonRightX = yuanBRX;
}
if (buttonRightY == undefined) {
buttonRightY = yuanBRY;
}
leftX = Math.min(leftX, yuanLeftX);
leftY = Math.min(leftY, yuanLeftY);
buttonRightX = Math.max(buttonRightX, yuanBRX);
buttonRightY = Math.max(buttonRightY, yuanBRY);
}
} else {
if (data[1] == "lineWidth") {
if (lineWidth < data[2]) {
lineWidth = data[2];
}
}
}
}
if (leftX != undefined || lineWidth > 0) {
if (leftX == undefined) {
leftX = 0;
leftY = 0;
}
leftX -= 20 + lineWidth >> 1;
leftY -= 20 + lineWidth >> 1;
buttonRightX += 20 + lineWidth >> 1;
buttonRightY += 20 + lineWidth >> 1;
let w = buttonRightX - leftX;
let h = buttonRightY - leftY;
s.offsetX = leftX;
s.offsetY = leftY;
s._localBoundsSelf.x = leftX + 10;
s._localBoundsSelf.y = leftY + 10;
s._localBoundsSelf.width = w - 20;
s._localBoundsSelf.height = h - 20;
let _canvas: any = s.canvas;
let ctx = s.context;
_canvas.width = w;
_canvas.height = h;
ctx.clearRect(0, 0, w, h);
ctx.setTransform(1, 0, 0, 1, -leftX, -leftY);
s._drawShape(ctx);
//贴图锚点修改
s.anchorTexture.set(-leftX / w, -leftY / h) //= { x: -leftX / w, y: -leftY / h };
} else {
s.canvas.width = 0;
s.canvas.height = 0;
s.offsetX = 0;
s.offsetY = 0;
s._localBoundsSelf.clear();
s.anchorTexture.set(0, 0) //= { x: 0, y: 0 };
}
//更新贴图
s.texture.update();
//这个先不管,上面的_localBoundsSelf等都已计算
s._onTextureUpdate();//更新回去anchorTexture修改时更新了用的时原先的canvas尺寸
}
/**
* @method _drawShape
* @param ctx
* @private
* @return {void}
*/
private _drawShape(ctx: any): void {
let s = this;
let com = s._command;
let cLen = com.length;
let data: any;
let leftX: number = s.offsetX;
let leftY: number = s.offsetY;
for (let i = 0; i < cLen; i++) {
data = com[i];
if (data[0] > 0) {
let paramsLen = data[2].length;
if (paramsLen == 0) {
ctx[data[1]]();
} else if (paramsLen == 2) {
ctx[data[1]](data[2][0], data[2][1]);
} else if (paramsLen == 4) {
ctx[data[1]](data[2][0], data[2][1], data[2][2], data[2][3]);
} else if (paramsLen == 5) {
ctx[data[1]](data[2][0], data[2][1], data[2][2], data[2][3], data[2][4]);
} else if (paramsLen == 6) {
let lx = data[2][4];
let ly = data[2][5];
if (data[0] == 2) {
//位图填充
lx -= leftX;
ly -= leftY;
}
ctx[data[1]](data[2][0], data[2][1], data[2][2], data[2][3], lx, ly);
}
} else {
ctx[data[1]] = data[2];
}
}
}
/**
* 重写hitTestPoint
* @method hitTestPoint
* @param {Point} globalPoint
* @param {boolean} isMouseEvent
* @return {any}
* @public
* @since 1.0.0
*/
public hitTestPoint(globalPoint: Point, isMouseEvent: boolean = false): DisplayObject {
let s: Shape = this;
//直接继承
var hitResult = super.hitTestPoint(globalPoint, isMouseEvent)
//如果这样返回都没有，直接返回null
if (!hitResult) return null;
//如果不是自己，是子级的。直接返回子级
if (hitResult != s) return hitResult;
//如果不是像素级碰撞 直接返回自己
if (!s.hitTestByPixel) return s;
let p: Point = globalPoint;
//p要用到获取像素
if (isMouseEvent) p = s.globalToLocal(globalPoint);
let image = s._texture;
//无图数据返回null
if (!image || image.width == 0 || image.height == 0) return null;
// var backupCanvas = getBackupCanvas();
// backupCanvas.width = 1;
// backupCanvas.height = 1;
p.x -= s.offsetX;
p.y -= s.offsetY;
let ctx = getBackupCanvasCtx() //backupCanvas.getContext('2d');
ctx.setTransform(1, 0, 0, 1, 0, 0);//先移动位置，否则颜色清除有问题,原先修改尺寸就不用
ctx.clearRect(0, 0, 1, 1);
ctx.setTransform(1, 0, 0, 1, -p.x, -p.y);
ctx.drawImage(s.canvas, 0, 0);
//像素透明度不为0；返回自己
if (ctx.getImageData(0, 0, 1, 1).data[3] > 0) return s;
return null
}
/**
* 如果有的话,改变矢量对象的边框或者填充的颜色.
* @method changeColor
* @param {Object} infoObj
* @param {string|any} infoObj.fillColor 填充颜色值，如"#fff" 或者 "rgba(255,255,255,1)"或者是Shape.getGradientColor()方法返回的渐变对象;
* @param {string} infoObj.strokeColor 线条颜色值，如"#fff" 或者 "rgba(255,255,255,1)";
* @param {number} infoObj.lineWidth 线条的粗细，如"1,2,3...";
* @public
* @since 1.0.2
*/
public changeColor(infoObj: any): void {
let s: Shape = this;
let cLen: number = s._command.length;
let c = s._command;
for (let i = 0; i < cLen; i++) {
if (c[i][0] == 0) {
if (c[i][1] == "fillStyle" && infoObj.fillColor && c[i][2] != infoObj.fillColor) {
c[i][2] = infoObj.fillColor;
s.dirty = true;
}
if (c[i][1] == "strokeStyle" && infoObj.strokeColor && c[i][2] != infoObj.strokeColor) {
c[i][2] = infoObj.strokeColor;
s.dirty = true;
}
if (c[i][1] == "lineWidth" && infoObj.lineWidth && c[i][2] != infoObj.lineWidth) {
c[i][2] = infoObj.lineWidth;
s.dirty = true;
}
}
}
}
_renderCanvas(renderer) {
this.updateShape();
super._renderCanvas(renderer);
}
_renderWebGL(renderer) {
this.updateShape();
super._renderWebGL(renderer)
}
public destroy(): void {
//清除相应的数据引用
let s = this;
s._command = null;
s._isBitmapStroke = null;
s._isBitmapFill = null;
super.destroy();
}
}
src/2d/graphics/index.ts
View file @ c029f17f
export { default as Graphics } from "./Graphics"; export { default as Graphics } from "./Graphics";
// export * from "./GraphicsData";//暂时不导。外部用不到暂时 // export * from "./GraphicsData";//暂时不导。外部用不到暂时
\ No newline at end of file
export * from "./Shape";
src/2d/loader/Loader.ts
View file @ c029f17f
...@@ -112,6 +112,8 @@ export class Loader extends EventDispatcher { ...@@ -112,6 +112,8 @@ export class Loader extends EventDispatcher {
img.onerror = function () { img.onerror = function () {
callback(false); callback(false);
} }
//坑爹中文
url = encodeURI(url)
if (url.indexOf('data:') !== 0) img.crossOrigin = "anonymous"; if (url.indexOf('data:') !== 0) img.crossOrigin = "anonymous";
img.src = url; img.src = url;
} }
......
src/2d/math/Matrix.ts
View file @ c029f17f
import { Point } from "././Point"; import { Point } from "././Point";
import { HashObject } from "../HashObject"; import { HashObject } from "../HashObject";
import { DEG_TO_RAD, cos, sin, RAD_TO_DEG } from "../const"; import { DEG_TO_RAD, cos, sin, RAD_TO_DEG, PI_2 } from "../const";
import Transform from "./Transform";
/** /**
* 2维矩阵 * 2维矩阵
...@@ -457,7 +458,45 @@ export class Matrix extends HashObject { ...@@ -457,7 +458,45 @@ export class Matrix extends HashObject {
return array; return array;
} }
/**
* 从矩阵数据转成tansform的数据
* @param transform
*/
decompose(transform: Transform) {
const a = this.a;
const b = this.b;
const c = this.c;
const d = this.d;
//取斜切
const skewX = -Math.atan2(-c, d);
const skewY = Math.atan2(b, a);
const delta = Math.abs(skewX + skewY);
//斜切值和旋转不唯一，所以设定条件只取其一
if (delta < 0.00001 || Math.abs(PI_2 - delta) < 0.00001) {
transform.rotation = skewY;
//考虑是否必要
if (a < 0 && d >= 0) {
transform.rotation += (transform.rotation <= 0) ? Math.PI : -Math.PI;
}
transform.skew.x = transform.skew.y = 0;
}
else {
transform.rotation = 0;
transform.skew.x = skewX;
transform.skew.y = skewY;
}
//取缩放
transform.scale.x = Math.sqrt((a * a) + (b * b));
transform.scale.y = Math.sqrt((c * c) + (d * d));
//取位置
transform.position.x = this.tx;
transform.position.y = this.ty;
return transform;
}
/** /**
* A default (identity) matrix * A default (identity) matrix
* *
......
src/2d/math/Rectangle.ts
View file @ c029f17f
...@@ -184,6 +184,8 @@ export class Rectangle extends HashObject { ...@@ -184,6 +184,8 @@ export class Rectangle extends HashObject {
let rect = arg[0]; let rect = arg[0];
let x = rect.x, y = rect.y, w = rect.width, h = rect.height, wx1: number, wx2: number, hy1: number, hy2: number; let x = rect.x, y = rect.y, w = rect.width, h = rect.height, wx1: number, wx2: number, hy1: number, hy2: number;
for (let i: number = 1; i < arg.length; i++) { for (let i: number = 1; i < arg.length; i++) {
//如果宽高为空，后续考虑是否xy需要占位;
if (!arg[i].width && !arg[i].height) continue;
wx1 = x + w; wx1 = x + w;
hy1 = y + h; hy1 = y + h;
wx2 = arg[i].x + arg[i].width; wx2 = arg[i].x + arg[i].width;
......
src/2d/text/BitmapText.ts
View file @ c029f17f
import { TEXT_ALIGN } from "../const"; import { TEXT_ALIGN, VERTICAL_ALIGN } from "../const";
import Texture from "../texture/Texture"; import Texture from "../texture/Texture";
import { Sprite, Container } from "../display"; import { Sprite, Container } from "../display";
...@@ -19,6 +19,10 @@ export class BitmapText extends Container { ...@@ -19,6 +19,10 @@ export class BitmapText extends Container {
* 对齐方式 * 对齐方式
*/ */
textAlign: TEXT_ALIGN = TEXT_ALIGN.CENTER; textAlign: TEXT_ALIGN = TEXT_ALIGN.CENTER;
/**
* 垂直居中方式，暂时还没写,
*/
verticalAlign: VERTICAL_ALIGN = VERTICAL_ALIGN.MIDDLE;
/** /**
* 文本 * 文本
*/ */
...@@ -95,6 +99,7 @@ export class BitmapText extends Container { ...@@ -95,6 +99,7 @@ export class BitmapText extends Container {
this.children[i].x = left + temSum this.children[i].x = left + temSum
temSum += this.children[i].width; temSum += this.children[i].width;
} }
//垂直居中，暂时还没写
} }
} }
...@@ -117,7 +122,7 @@ class BitmapTextSingle extends Sprite { ...@@ -117,7 +122,7 @@ class BitmapTextSingle extends Sprite {
return this._text return this._text
} }
set text(value: string) { set text(value: string) {
if (value == this._text) return; // if (value == this._text) return;
this._text = value; this._text = value;
this.texture = this.textures[this._text]; this.texture = this.textures[this._text];
} }
......
src/2d/text/TextField.ts
View file @ c029f17f
...@@ -614,9 +614,9 @@ export class TextField extends Sprite { ...@@ -614,9 +614,9 @@ export class TextField extends Sprite {
if (s.stroke) { if (s.stroke) {
ctx.strokeStyle = s.strokeColor; ctx.strokeStyle = s.strokeColor;
ctx.lineWidth = s.stroke * 2; ctx.lineWidth = s.stroke * 2;
ctx.strokeText(realLines[i], ox, upY + i * lineH, maxW); ctx.strokeText(realLines[i], ox, upY + i * lineH/*, maxW*/);
} }
ctx.fillText(realLines[i], ox, upY + i * lineH, maxW); ctx.fillText(realLines[i], ox, upY + i * lineH/*, maxW*/);//考虑去掉这个maxW
} }
//offset用_anchorTexture代替 //offset用_anchorTexture代替
s.offsetX = -padding; s.offsetX = -padding;
......
src/2d/ui/Button.ts
View file @ c029f17f
...@@ -6,9 +6,9 @@ import Texture from "../texture/Texture"; ...@@ -6,9 +6,9 @@ import Texture from "../texture/Texture";
import Tween from "../../tween/Tween"; import Tween from "../../tween/Tween";
export class Button extends Sprite { export class Button extends Sprite {
textureUp; private textureUp: Texture;
textureDown; private textureDown: Texture;
textureDisable; private textureDisable: Texture;
constructor(tUp: Texture, tDown?: Texture, tDisable?: Texture) { constructor(tUp: Texture, tDown?: Texture, tDisable?: Texture) {
super(tUp); super(tUp);
this._instanceType = "Button"; this._instanceType = "Button";
...@@ -22,6 +22,25 @@ export class Button extends Sprite { ...@@ -22,6 +22,25 @@ export class Button extends Sprite {
this.anchorY = this.textureUp.height / 2; this.anchorY = this.textureUp.height / 2;
this.initButton(); this.initButton();
} }
/**
* 修改纹理
* @param tUp
* @param tDown
* @param tDisable
*/
changeTexture(tUp: Texture, tDown?: Texture, tDisable?: Texture) {
this.textureUp = tUp;
this.textureDown = tDown === tUp ? null : tDown;
this.textureDisable = tDisable || tUp;
this.anchorX = this.textureUp.width / 2;
this.anchorY = this.textureUp.height / 2;
//如果是点击状态时且有down
if (this._clicked && this.textureDown) {
this.texture = this.textureDown;
} else {
this.texture = this.textureUp;
}
}
/** /**
* @method _mouseEvent * @method _mouseEvent
......
src/2d/ui/MovieClip.ts
View file @ c029f17f
...@@ -244,7 +244,8 @@ export class MovieClip extends Container { ...@@ -244,7 +244,8 @@ export class MovieClip extends Container {
this.addChild(child); this.addChild(child);
//透明度处理 //透明度处理
if (ele.frames[0].alpha < 0.05) { if (ele.frames[0].alpha < 0.05) {
child.visible = false; // child.visible = false;
child.alpha = 0;
} else { } else {
child.alpha = ele.frames[0].alpha; child.alpha = ele.frames[0].alpha;
} }
...@@ -602,9 +603,10 @@ export class MovieClip extends Container { ...@@ -602,9 +603,10 @@ export class MovieClip extends Container {
var frame = child["frames"][s._curFrame - 1]; var frame = child["frames"][s._curFrame - 1];
//layout不晓得干嘛用，暂不管 //layout不晓得干嘛用，暂不管
if (frame.alpha < 0.05) { if (frame.alpha < 0.05) {
child.visible = false; // child.visible = false;
child.alpha = 0;
} else { } else {
child.visible = true; // child.visible = true;
child.alpha = frame.alpha; child.alpha = frame.alpha;
//先判断transform是否相等 //先判断transform是否相等
if (!Matrix.isEqual(child.transform.localMatrix, frame.transform)) { if (!Matrix.isEqual(child.transform.localMatrix, frame.transform)) {
......
src/2d/utils/index.ts
View file @ c029f17f
...@@ -30,13 +30,23 @@ export function uid(): number { ...@@ -30,13 +30,23 @@ export function uid(): number {
return ++nextUid; return ++nextUid;
} }
let backupCanvasCtx: CanvasRenderingContext2D
/** /**
* 各种使用需要的canvas * 各种使用需要的canvas
* 比如取canvas上下文创建对象，渐变色等 * 比如取canvas上下文创建对象，渐变色等
* 像素碰撞检测时 * 像素碰撞检测时
* 淘宝小程序内不要用任何相关的先 * 淘宝小程序内不要用任何相关的先
*/ */
export const backupCanvas: HTMLCanvasElement = null //= document.createElement("canvas") // export const backupCanvas: HTMLCanvasElement = createCanvas() //= document.createElement("canvas")
export function getBackupCanvasCtx() {
if (!backupCanvasCtx) {
var canvas = createCanvas();
canvas.width = 1;
canvas.height = 1;
backupCanvasCtx = canvas.getContext("2d");
}
return backupCanvasCtx
}
/** /**
* 创建渐变色 * 创建渐变色
* @param points * @param points
...@@ -44,7 +54,7 @@ export const backupCanvas: HTMLCanvasElement = null //= document.createElement(" ...@@ -44,7 +54,7 @@ export const backupCanvas: HTMLCanvasElement = null //= document.createElement("
*/ */
export function getGradientColor(points: any, colors: any): any { export function getGradientColor(points: any, colors: any): any {
let colorObj: any; let colorObj: any;
let ctx = backupCanvas.getContext("2d"); let ctx = getBackupCanvasCtx()//backupCanvas.getContext("2d");
if (points.length == 4) { if (points.length == 4) {
colorObj = ctx.createLinearGradient(points[0], points[1], points[2], points[3]); colorObj = ctx.createLinearGradient(points[0], points[1], points[2], points[3]);
} else { } else {
...@@ -60,7 +70,7 @@ export function getGradientColor(points: any, colors: any): any { ...@@ -60,7 +70,7 @@ export function getGradientColor(points: any, colors: any): any {
* @param image * @param image
*/ */
export function getCanvasBitmapStyle(image: any): any { export function getCanvasBitmapStyle(image: any): any {
let ctx = backupCanvas.getContext("2d"); let ctx = getBackupCanvasCtx()//backupCanvas.getContext("2d");
return ctx.createPattern(image, "repeat"); return ctx.createPattern(image, "repeat");
} }
/** /**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment