Skip to content

F
fyge_for_tb
Commit fc4461c8 authored by wangjianfeng.yz's avatar wangjianfeng.yz
Browse files
Options

2.0.55

parent 74a9983b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1114 additions and 303 deletions
build/FYGE.d.ts
View file @ fc4461c8
declare namespace FYGE{export const VERSION = "2.0.54";
declare namespace FYGE{export const VERSION = "2.0.55";
export function cos(angle: number): number;
......@@ -570,7 +570,7 @@ export class ObservablePoint extends HashObject {
* @param {number} [x=0]
* @param {number} [y=0]
*/
set(x?: number, y?: number): void;
set(x: number, y: number): void;
/**
* 从一个点复制xy
*
......@@ -1357,11 +1357,6 @@ export class Polygon {
* @return {Polygon} a copy of the polygon
*/
clone(): Polygon;
/**
* Closes the polygon, adding points if necessary.
*
*/
close(): void;
/**
* Checks whether the x and y coordinates passed to this function are contained within this polygon
*
......@@ -1954,9 +1949,23 @@ export class LineStyle extends FillStyle {
width: number;
/**
* 线的对齐方式
* 默认LINE_ALIGNMENT.middle 0.5
* @default LINE_ALIGNMENT.middle 0.5
*/
alignment: LINE_ALIGNMENT;
/**
* Line cap style.
* @default LINE_CAP.BUTT
*/
cap: LINE_CAP;
/**
* Line join style.
* @default LINE_JOIN.MITER
*/
join: LINE_JOIN;
/**
* Miter limit.
*/
miterLimit: number;
/**
* Clones the object
*
......@@ -4435,11 +4444,14 @@ export class Sprite extends Container {
* 0，0标识左上角，0.5，0.5表示中间，1，1表示右下角
* @member {ObservablePoint}
*/
get anchorTexture(): any;
get anchorTexture(): ObservablePoint;
/**
* 设置贴图锚点，copy方法，只要value存在x、y字段就行
*/
set anchorTexture(value: any);
set anchorTexture(value: {
x: number;
y: number;
});
/**
* 获取纹理
* @member {Texture}
......@@ -4952,6 +4964,8 @@ export const GRAPHICS_CURVES: {
segmentsCount: Function;
}
export function isPointsClockwise(points: ArrayLike<number>, closed?: boolean): boolean;
export class Graphics extends Container {
/**
* 混色模式
......@@ -5053,15 +5067,18 @@ export class Graphics extends Container {
* @memberof Graphics#
* @default false
*/
cacheAsBitmap: boolean;
private cacheAsBitmap;
/**
* 需与dirty一致
*/
private cacheDirty;
private _canvasBuffer;
_texture: Texture;
offsetX: number;
offsetY: number;
private _texture;
/**
* Minimal distance between points that are considered different.
* Affects line tesselation.
*/
closePointEps: number;
verts: any;
indices: any;
private batches;
......@@ -5077,16 +5094,29 @@ export class Graphics extends Container {
* @return {Graphics}
*/
clone(): Graphics;
/**
* 为了有一个和Shape保持一致的方法，也为了能加入cap等属性，但不改变原来的lineStyle
* 比Shape多了aligment方法，和native（暂时无效）
* @param color
* @param lineWidth
* @param cap
* @param join
* @param miterLimit
* @param alpha
* @param alignment - 线的居中方式，注意对于多边形，永远是朝向的左边为1，右边为0，封闭时顺时针外部1内部0，逆时针相反，canvas模式下暂时只有居中0.5
* @param native
*/
beginStroke(color?: number | string, lineWidth?: number, cap?: LINE_CAP, join?: LINE_JOIN, miterLimit?: number, alpha?: number, alignment?: LINE_ALIGNMENT, native?: boolean): this;
/**
* line属于附属属性，暂不写beginStroke，只要没调用过beginFill就是纯stroke
* @param {number} [lineWidth=0] - 线的粗细
* @param {number} [color=0] - 线的颜色
* @param {number} [alpha=1] - 线的透明度
* @param {number} [alignment=0.5] - 线的居中方式，canvas模式下发现线显示不全，尝试设置为0或1
* @param {number} [alignment=0.5] - 线的居中方式，注意对于多边形，永远是朝向的左边为1，右边为0，封闭时顺时针外部1内部0，逆时针相反，canvas模式下暂时只有居中0.5
* @return {Graphics}
*/
lineStyle(lineWidth?: number, color?: number, alpha?: number, alignment?: LINE_ALIGNMENT, native?: boolean): Graphics;
lineTextureStyle(width?: number, texture?: Texture, color?: number, alpha?: number, matrix?: any, alignment?: number, native?: boolean): this;
private lineTextureStyle;
private startPoly;
private finishPoly;
moveTo(x: number, y: number): Graphics;
......@@ -5146,7 +5176,7 @@ export class Graphics extends Container {
* @return {Graphics}
*/
beginFill(color?: number | string, alpha?: number): Graphics;
beginTextureFill(texture?: Texture, color?: number, alpha?: number, matrix?: Matrix): this;
private beginTextureFill;
/**
* 结束填充
* @return {Graphics}
......@@ -5158,7 +5188,7 @@ export class Graphics extends Container {
*/
endStroke(): Graphics;
/**
* 闭合路径
* 闭合路径，只为了画线stroke时确定是否闭合，终点和起点一致也不能算闭合，只有调用时算，fill没必要
* 只用在多边形的路径里
* @return {Graphics}
*/
......@@ -6355,11 +6385,9 @@ export class FloatDisplay extends DisplayObject {
}
export class Shape extends Sprite {
canvas: HTMLCanvasElement;
context: CanvasRenderingContext2D;
dirty: boolean;
offsetX: number;
offsetY: number;
private canvas;
private context;
private dirty;
constructor();
/**
* 一个数组，每个元素也是一个数组[类型 0是属性,1是方法,名字 执行的属性或方法名,参数]
......@@ -6668,14 +6696,12 @@ export function toDisplayDataURL(obj: DisplayObject, rect?: Rectangle, typeInfo
export class TextField extends Sprite {
private static shareCanvas;
private static shareContext;
canvas: HTMLCanvasElement;
context: CanvasRenderingContext2D;
private canvas;
private context;
/**
* 与其他类不同，用了Boolean，再考虑
*/
dirty: boolean;
offsetX: number;
offsetY: number;
private dirty;
constructor();
/**
* @property textAlpha
......
build/fyge.esm.js
View file @ fc4461c8
This diff is collapsed.
build/fyge.esm.js.map
View file @ fc4461c8
This diff is collapsed.
build/fyge.min.js
View file @ fc4461c8
This diff is collapsed.
build/fyge.min.js.map
View file @ fc4461c8
This diff is collapsed.
build/types.d.ts
View file @ fc4461c8
export const VERSION = "2.0.54";
export const VERSION = "2.0.55";
export function cos(angle: number): number;
......@@ -570,7 +570,7 @@ export class ObservablePoint extends HashObject {
* @param {number} [x=0]
* @param {number} [y=0]
*/
set(x?: number, y?: number): void;
set(x: number, y: number): void;
/**
* 从一个点复制xy
*
......@@ -1357,11 +1357,6 @@ export class Polygon {
* @return {Polygon} a copy of the polygon
*/
clone(): Polygon;
/**
* Closes the polygon, adding points if necessary.
*
*/
close(): void;
/**
* Checks whether the x and y coordinates passed to this function are contained within this polygon
*
......@@ -1954,9 +1949,23 @@ export class LineStyle extends FillStyle {
width: number;
/**
* 线的对齐方式
* 默认LINE_ALIGNMENT.middle 0.5
* @default LINE_ALIGNMENT.middle 0.5
*/
alignment: LINE_ALIGNMENT;
/**
* Line cap style.
* @default LINE_CAP.BUTT
*/
cap: LINE_CAP;
/**
* Line join style.
* @default LINE_JOIN.MITER
*/
join: LINE_JOIN;
/**
* Miter limit.
*/
miterLimit: number;
/**
* Clones the object
*
......@@ -4435,11 +4444,14 @@ export class Sprite extends Container {
* 0，0标识左上角，0.5，0.5表示中间，1，1表示右下角
* @member {ObservablePoint}
*/
get anchorTexture(): any;
get anchorTexture(): ObservablePoint;
/**
* 设置贴图锚点，copy方法，只要value存在x、y字段就行
*/
set anchorTexture(value: any);
set anchorTexture(value: {
x: number;
y: number;
});
/**
* 获取纹理
* @member {Texture}
......@@ -4952,6 +4964,8 @@ export const GRAPHICS_CURVES: {
segmentsCount: Function;
}
export function isPointsClockwise(points: ArrayLike<number>, closed?: boolean): boolean;
export class Graphics extends Container {
/**
* 混色模式
......@@ -5053,15 +5067,18 @@ export class Graphics extends Container {
* @memberof Graphics#
* @default false
*/
cacheAsBitmap: boolean;
private cacheAsBitmap;
/**
* 需与dirty一致
*/
private cacheDirty;
private _canvasBuffer;
_texture: Texture;
offsetX: number;
offsetY: number;
private _texture;
/**
* Minimal distance between points that are considered different.
* Affects line tesselation.
*/
closePointEps: number;
verts: any;
indices: any;
private batches;
......@@ -5077,16 +5094,29 @@ export class Graphics extends Container {
* @return {Graphics}
*/
clone(): Graphics;
/**
* 为了有一个和Shape保持一致的方法，也为了能加入cap等属性，但不改变原来的lineStyle
* 比Shape多了aligment方法，和native（暂时无效）
* @param color
* @param lineWidth
* @param cap
* @param join
* @param miterLimit
* @param alpha
* @param alignment - 线的居中方式，注意对于多边形，永远是朝向的左边为1，右边为0，封闭时顺时针外部1内部0，逆时针相反，canvas模式下暂时只有居中0.5
* @param native
*/
beginStroke(color?: number | string, lineWidth?: number, cap?: LINE_CAP, join?: LINE_JOIN, miterLimit?: number, alpha?: number, alignment?: LINE_ALIGNMENT, native?: boolean): this;
/**
* line属于附属属性，暂不写beginStroke，只要没调用过beginFill就是纯stroke
* @param {number} [lineWidth=0] - 线的粗细
* @param {number} [color=0] - 线的颜色
* @param {number} [alpha=1] - 线的透明度
* @param {number} [alignment=0.5] - 线的居中方式，canvas模式下发现线显示不全，尝试设置为0或1
* @param {number} [alignment=0.5] - 线的居中方式，注意对于多边形，永远是朝向的左边为1，右边为0，封闭时顺时针外部1内部0，逆时针相反，canvas模式下暂时只有居中0.5
* @return {Graphics}
*/
lineStyle(lineWidth?: number, color?: number, alpha?: number, alignment?: LINE_ALIGNMENT, native?: boolean): Graphics;
lineTextureStyle(width?: number, texture?: Texture, color?: number, alpha?: number, matrix?: any, alignment?: number, native?: boolean): this;
private lineTextureStyle;
private startPoly;
private finishPoly;
moveTo(x: number, y: number): Graphics;
......@@ -5146,7 +5176,7 @@ export class Graphics extends Container {
* @return {Graphics}
*/
beginFill(color?: number | string, alpha?: number): Graphics;
beginTextureFill(texture?: Texture, color?: number, alpha?: number, matrix?: Matrix): this;
private beginTextureFill;
/**
* 结束填充
* @return {Graphics}
......@@ -5158,7 +5188,7 @@ export class Graphics extends Container {
*/
endStroke(): Graphics;
/**
* 闭合路径
* 闭合路径，只为了画线stroke时确定是否闭合，终点和起点一致也不能算闭合，只有调用时算，fill没必要
* 只用在多边形的路径里
* @return {Graphics}
*/
......@@ -6355,11 +6385,9 @@ export class FloatDisplay extends DisplayObject {
}
export class Shape extends Sprite {
canvas: HTMLCanvasElement;
context: CanvasRenderingContext2D;
dirty: boolean;
offsetX: number;
offsetY: number;
private canvas;
private context;
private dirty;
constructor();
/**
* 一个数组，每个元素也是一个数组[类型 0是属性,1是方法,名字 执行的属性或方法名,参数]
......@@ -6668,14 +6696,12 @@ export function toDisplayDataURL(obj: DisplayObject, rect?: Rectangle, typeInfo
export class TextField extends Sprite {
private static shareCanvas;
private static shareContext;
canvas: HTMLCanvasElement;
context: CanvasRenderingContext2D;
private canvas;
private context;
/**
* 与其他类不同，用了Boolean，再考虑
*/
dirty: boolean;
offsetX: number;
offsetY: number;
private dirty;
constructor();
/**
* @property textAlpha
......
package.json
View file @ fc4461c8
{
"name": "fyge",
"version": "2.0.54",
"version": "2.0.55",
"description": "canvas渲染引擎",
"main": "./build/fyge.min.js",
"module": "./build/fyge.esm.js",
......
record.txt
View file @ fc4461c8
......@@ -520,6 +520,31 @@
Point类新增copy方法
Texture类的_rotate变私有方法，且注释了rotate的set方法，以后有办法让人为赋值显示没问题了再说
2.0.55 Sprite的anchorTexture的get方法加上返回类型，anchorTexture的set方法参数加上类型{x:number,y:number}
Graphics的cacheAsBitmap和_texture变私有
Graphics去掉offsetX和offsetY（涉及generateCanvasTexture），相应CanvasSpriteRenderer里的offsetXY替换成_localBoundsSelf的xy，并加上判断instanceType=="Graphics"（是否有必要）
Graphics新增属性closePointEps，对应修改arc方法里的0.001改成该属性值，buildLine里也用到
Graphics新增beginStroke方法，除了最后的alignment和native属性，其他和Shape的一致，为了加上三个属性cap、join、miterLimit
Graphics把beginTextureFill和lineTextureStyle改成私有，解决几何里纹理的问题（图集，重复，变换等）前，不对外开放
Graphics的closePath方法修改。标记closed为true，删除Polygon里的close方法
Graphics的updateLocalBoundsSelf方法里加上调用finishPoly，然后关于lineWidth的修改较多，以后有时间再搞
Shape的canvas、context、dirty都变私有
Shape去掉offsetX和offsetY，相关使用删除，_drawShape方法里位图有矩阵时offsetXY替换成了anchorTextureXY乘canvasWH
Shape的beginStroke方法参数miter默认值改成10
buildCircle的points改成顺时针（为了buildLine统一线居中方式），sin和cos交换下
buildLine大改，为了cap，join等等
buildRoundedRectangle的build方法修改，判断radius，并改成顺时针，且去掉原先为了避免点重叠的0.0000000001，quadraticBezierCurve方法里加了判断不会重叠
RoundedRectangle的构造函数里去掉了原先为了避免点重叠的0.0000000001，待测试
LineStyle加了三个属性cap、join、miterLimit，相应clone和reset也加上
ObservablePoint的set方法修改，去掉默认赋值0和原先的y不传时就用x，单纯xy都需要传，和point的set保持一致
CanvasGraphicsRenderer的render方法新增赋值context属性lineCap，lineJoin，miterLimit，且去掉maxRadius丢弃小数操作|0
TextField的canvas、context、dirty都变私有
TextField去掉offsetX和offsetY，相关使用删除，待测试，暂时感觉没啥用，和Shape一样，原先为了CanvasSpriteRenderer里，现在这俩都用anchorTexture了
......
src/2d/const.ts
View file @ fc4461c8
......@@ -7,7 +7,7 @@
* @name VERSION
* @type {string}
*/
export const VERSION = "2.0.54";
export const VERSION = "2.0.55";
/**
......
src/2d/display/Sprite.ts
View file @ fc4461c8
......@@ -520,13 +520,13 @@ export default class Sprite extends Container {
* 0，0标识左上角，0.5，0.5表示中间，1，1表示右下角
* @member {ObservablePoint}
*/
get anchorTexture() {
get anchorTexture():ObservablePoint {
return this._anchorTexture;
}
/**
* 设置贴图锚点，copy方法，只要value存在x、y字段就行
*/
set anchorTexture(value: any) {
set anchorTexture(value: { x: number, y: number }) {
this._anchorTexture.copy(value);
}
......
src/2d/graphics/Graphics.ts
View file @ fc4461c8
This diff is collapsed.
src/2d/graphics/Shape.ts
View file @ fc4461c8
......@@ -18,11 +18,12 @@ import Sprite from "../display/Sprite";
* @extends Sprite
*/
export class Shape extends Sprite {
canvas: HTMLCanvasElement;
context: CanvasRenderingContext2D;
dirty: boolean;
offsetX: number;
offsetY: number;
private canvas: HTMLCanvasElement;
private context: CanvasRenderingContext2D;
private dirty: boolean;
// offsetX: number;
// offsetY: number;
constructor() {
super();
this._instanceType = "Shape";
......@@ -399,7 +400,7 @@ export class Shape extends Sprite {
lineWidth: number = 1,
cap: LINE_CAP = LINE_CAP.BUTT,
join: LINE_JOIN = LINE_JOIN.MITER,
miter: number = 0,
miter: number = 10,
alpha: number = 1
): this {
if (typeof (color) == "number") color = hex2string(color);
......@@ -649,8 +650,8 @@ export class Shape extends Sprite {
buttonRightY += 20 + lineWidth >> 1;
let w = buttonRightX - leftX;
let h = buttonRightY - leftY;
s.offsetX = leftX;
s.offsetY = leftY;
// s.offsetX = leftX;
// s.offsetY = leftY;
// s._localBoundsSelf.x = leftX + 10;//下面anchorTexture的设置会更新（且还是原来的错误的纹理尺寸），s.texture.update()里也会更新了
// s._localBoundsSelf.y = leftY + 10;
// s._localBoundsSelf.width = w - 20;
......@@ -667,8 +668,8 @@ export class Shape extends Sprite {
} else {
s.canvas.width = 0;
s.canvas.height = 0;
s.offsetX = 0;
s.offsetY = 0;
// s.offsetX = 0;
// s.offsetY = 0;
// s._localBoundsSelf.clear();//下面anchorTexture的设置会更新（且还是原来的错误的纹理尺寸），s.texture.update()里也会更新了
s.anchorTexture.set(0, 0) //= { x: 0, y: 0 };
}
......@@ -689,8 +690,8 @@ export class Shape extends Sprite {
let com = s._command;
let cLen = com.length;
let data: any;
let leftX: number = s.offsetX;
let leftY: number = s.offsetY;
// let leftX: number = s.offsetX;
// let leftY: number = s.offsetY;
for (let i = 0; i < cLen; i++) {
data = com[i];
if (data[0] > 0) {
......@@ -708,8 +709,11 @@ export class Shape extends Sprite {
let ly = data[2][5];
if (data[0] == 2) {
//位图填充
lx -= leftX;
ly -= leftY;
// lx -= leftX;
// ly -= leftY;
//位图填充是也有矩阵，导致_drawShape之前设置的setTransform里的-leftX, -leftY无效，所以这里额外处理,待测试
lx += s.anchorTexture.x * s.canvas.width;
lx += s.anchorTexture.y * s.canvas.height;
}
ctx[data[1]](data[2][0], data[2][1], data[2][2], data[2][3], lx, ly);
}
......
src/2d/graphics/geomBuild/buildCircle.ts
View file @ fc4461c8
......@@ -43,16 +43,23 @@ export default {
}
let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius))
|| Math.floor(15 * Math.sqrt(circleData.width + circleData.height));
|| Math.floor(15 * Math.sqrt(width + height));
totalSegs /= 2.3;
const seg = (Math.PI * 2) / totalSegs;
for (let i = 0; i < totalSegs; i++) {
points.push(
x + (Math.sin(seg * i) * width),
y + (Math.cos(seg * i) * height)
// for (let i = 0; i < totalSegs; i++) {
// points.push(
// x + (Math.sin(seg * i) * width),
// y + (Math.cos(seg * i) * height)
// );
// }
//20211220修改
for (let i = 0; i < totalSegs - 0.5; i++) {
points.push(//顺时针
x + (Math.cos(seg * i) * width),
y + (Math.sin(seg * i) * height)
);
}
......@@ -62,7 +69,7 @@ export default {
);
},
triangulate(graphicsData, graphicsGeometry:Graphics) {
triangulate(graphicsData, graphicsGeometry: Graphics) {
const points = graphicsData.points;
const verts = graphicsGeometry.verts;
const indices = graphicsGeometry.indices;
......
src/2d/graphics/geomBuild/buildLine.ts
View file @ fc4461c8
This diff is collapsed.
src/2d/graphics/geomBuild/buildLineOld.ts 0 → 100644
View file @ fc4461c8
import GraphicsData from "../GraphicsData";
import Graphics from "../Graphics";
import { Point } from "../../math";
import { SHAPES } from "../../const";
/**
* Builds a line to draw
*
* Ignored from docs since it is not directly exposed.
*
* @ignore
* @private
* @param {WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
* @param {object} webGLData - an object containing all the WebGL-specific information to create this shape
* @param {object} webGLDataNativeLines - an object containing all the WebGL-specific information to create nativeLines
*/
export default function (graphicsData: GraphicsData, graphicsGeometry: Graphics) {
// if (graphicsData.lineStyle.native)
// {
// buildNativeLine(graphicsData, graphicsGeometry);
// }
// else
// {
buildLine(graphicsData, graphicsGeometry);
// }
}
/**
* Builds a line to draw using the polygon method.
*
* Ignored from docs since it is not directly exposed.
*
* @ignore
* @private
* @param {GraphicsData} graphicsData - The graphics object containing all the necessary properties
* @param {GraphicsGeometry} graphicsGeometry - Geometry where to append output
*/
function buildLine(graphicsData: GraphicsData, graphicsGeometry: Graphics) {
const shape = graphicsData.shape;
let points = graphicsData.points || shape.points.slice();
if (points.length === 0) {
return;
}
// if the line width is an odd number add 0.5 to align to a whole pixel
// commenting this out fixes #711 and #1620
// if (graphicsData.lineWidth%2)
// {
// for (i = 0; i < points.length; i++)
// {
// points[i] += 0.5;
// }
// }
const style = graphicsData.lineStyle;
// get first and last point.. figure out the middle!
const firstPoint = new Point(points[0], points[1]);
const lastPoint = new Point(points[points.length - 2], points[points.length - 1]);
const closedShape = shape.type !== SHAPES.POLY || shape.closed;
const closedPath = firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y;
// if the first point is the last point - gonna have issues :)
if (closedPath || closedShape) {
// need to clone as we are going to slightly modify the shape..
points = points.slice();
if (closedPath) {
points.pop();
points.pop();
lastPoint.set(points[points.length - 2], points[points.length - 1]);
}
const midPointX = lastPoint.x + ((firstPoint.x - lastPoint.x) * 0.5);
const midPointY = lastPoint.y + ((firstPoint.y - lastPoint.y) * 0.5);
points.unshift(midPointX, midPointY);
points.push(midPointX, midPointY);
}
const verts = graphicsGeometry.verts;
const length = points.length / 2;
let indexCount = points.length;
let indexStart = verts.length / 2;
// DRAW the Line
const width = style.width / 2;
// sort color
let p1x = points[0];
let p1y = points[1];
let p2x = points[2];
let p2y = points[3];
let p3x = 0;
let p3y = 0;
let perpx = -(p1y - p2y);
let perpy = p1x - p2x;
let perp2x = 0;
let perp2y = 0;
let perp3x = 0;
let perp3y = 0;
let dist = Math.sqrt((perpx * perpx) + (perpy * perpy));
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
const ratio = style.alignment;// 0.5;
const r1 = (1 - ratio) * 2;
const r2 = ratio * 2;
// start
verts.push(
p1x - (perpx * r1),
p1y - (perpy * r1));
verts.push(
p1x + (perpx * r2),
p1y + (perpy * r2));
for (let i = 1; i < length - 1; ++i) {
p1x = points[(i - 1) * 2];
p1y = points[((i - 1) * 2) + 1];
p2x = points[i * 2];
p2y = points[(i * 2) + 1];
p3x = points[(i + 1) * 2];
p3y = points[((i + 1) * 2) + 1];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt((perpx * perpx) + (perpy * perpy));
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
dist = Math.sqrt((perp2x * perp2x) + (perp2y * perp2y));
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
const a1 = (-perpy + p1y) - (-perpy + p2y);
const b1 = (-perpx + p2x) - (-perpx + p1x);
const c1 = ((-perpx + p1x) * (-perpy + p2y)) - ((-perpx + p2x) * (-perpy + p1y));
const a2 = (-perp2y + p3y) - (-perp2y + p2y);
const b2 = (-perp2x + p2x) - (-perp2x + p3x);
const c2 = ((-perp2x + p3x) * (-perp2y + p2y)) - ((-perp2x + p2x) * (-perp2y + p3y));
let denom = (a1 * b2) - (a2 * b1);
if (Math.abs(denom) < 0.1) {
denom += 10.1;
verts.push(
p2x - (perpx * r1),
p2y - (perpy * r1));
verts.push(
p2x + (perpx * r2),
p2y + (perpy * r2));
continue;
}
const px = ((b1 * c2) - (b2 * c1)) / denom;
const py = ((a2 * c1) - (a1 * c2)) / denom;
const pdist = ((px - p2x) * (px - p2x)) + ((py - p2y) * (py - p2y));
if (pdist > (196 * width * width)) {
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
dist = Math.sqrt((perp3x * perp3x) + (perp3y * perp3y));
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - (perp3x * r1), p2y - (perp3y * r1));
verts.push(p2x + (perp3x * r2), p2y + (perp3y * r2));
verts.push(p2x - (perp3x * r2 * r1), p2y - (perp3y * r1));
indexCount++;
}
else {
verts.push(p2x + ((px - p2x) * r1), p2y + ((py - p2y) * r1));
verts.push(p2x - ((px - p2x) * r2), p2y - ((py - p2y) * r2));
}
}
p1x = points[(length - 2) * 2];
p1y = points[((length - 2) * 2) + 1];
p2x = points[(length - 1) * 2];
p2y = points[((length - 1) * 2) + 1];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt((perpx * perpx) + (perpy * perpy));
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - (perpx * r1), p2y - (perpy * r1));
verts.push(p2x + (perpx * r2), p2y + (perpy * r2));
const indices = graphicsGeometry.indices;
// indices.push(indexStart);
for (let i = 0; i < indexCount - 2; ++i) {
indices.push(indexStart, indexStart + 1, indexStart + 2);
indexStart++;
}
}
/**
* Builds a line to draw using the gl.drawArrays(gl.LINES) method
*
* Ignored from docs since it is not directly exposed.
*
* @ignore
* @private
* @param {WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
* @param {object} webGLData - an object containing all the WebGL-specific information to create this shape
*/
function buildNativeLine(graphicsData, graphicsGeometry) {
let i = 0;
const points = graphicsData.points || graphicsData.shape.points;
if (points.length === 0) return;
const verts = graphicsGeometry.points;
const indices = graphicsGeometry.indices;
const length = points.length / 2;
let indexStart = verts.length / 2;
// sort color
for (i = 1; i < length; i++) {
const p1x = points[(i - 1) * 2];
const p1y = points[((i - 1) * 2) + 1];
const p2x = points[i * 2];
const p2y = points[(i * 2) + 1];
verts.push(p1x, p1y);
verts.push(p2x, p2y);
indices.push(indexStart++, indexStart++);
}
}
src/2d/graphics/geomBuild/buildRoundedRectangle.ts
View file @ fc4461c8
......@@ -15,8 +15,7 @@ import Graphics from "../Graphics";
*/
export default {
build(graphicsData:GraphicsData)
{
build(graphicsData: GraphicsData) {
const rrectData = graphicsData.shape;
const points = graphicsData.points;
const x = rrectData.x;
......@@ -28,18 +27,43 @@ export default {
points.length = 0;
points.push(x, y + radius);
quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, points);
quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, points);
quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y, points);
quadraticBezierCurve(x + radius, y, x, y, x, y + radius + 0.0000000001, points);
// this tiny number deals with the issue that occurs when points overlap and earcut fails to triangulate the item.
// TODO - fix this properly, this is not very elegant.. but it works for now.
// points.push(x, y + radius);
// quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, points);
// quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, points);
// quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y, points);
// quadraticBezierCurve(x + radius, y, x, y, x, y + radius + 0.0000000001, points);
// // this tiny number deals with the issue that occurs when points overlap and earcut fails to triangulate the item.
// // TODO - fix this properly, this is not very elegant.. but it works for now.
//20211212修改
if (!radius) {//顺时针
points.push(x, y,
x + width, y,
x + width, y + height,
x, y + height);
}
else {//顺时针
quadraticBezierCurve(x, y + radius,
x, y,
x + radius, y,
points);
quadraticBezierCurve(x + width - radius, y,
x + width, y,
x + width, y + radius,
points);
quadraticBezierCurve(x + width, y + height - radius,
x + width, y + height,
x + width - radius, y + height,
points);
quadraticBezierCurve(x + radius, y + height,
x, y + height,
x, y + height - radius,
points);
}
},
triangulate(graphicsData:GraphicsData, graphicsGeometry:Graphics)
{
triangulate(graphicsData: GraphicsData, graphicsGeometry: Graphics) {
const points = graphicsData.points;
const verts = graphicsGeometry.verts;
......@@ -49,8 +73,7 @@ export default {
const triangles = earcut(points, null, 2);
for (let i = 0, j = triangles.length; i < j; i += 3)
{
for (let i = 0, j = triangles.length; i < j; i += 3) {
indices.push(triangles[i] + vecPos);
// indices.push(triangles[i] + vecPos);
indices.push(triangles[i + 1] + vecPos);
......@@ -58,8 +81,7 @@ export default {
indices.push(triangles[i + 2] + vecPos);
}
for (let i = 0, j = points.length; i < j; i++)
{
for (let i = 0, j = points.length; i < j; i++) {
verts.push(points[i], points[++i]);
}
},
......@@ -78,8 +100,7 @@ export default {
* @return {number} the result
*
*/
function getPt(n1, n2, perc)
{
function getPt(n1, n2, perc) {
const diff = n2 - n1;
return n1 + (diff * perc);
......@@ -102,8 +123,7 @@ function getPt(n1, n2, perc)
* @param {number[]} [out=[]] - The output array to add points into. If not passed, a new array is created.
* @return {number[]} an array of points
*/
function quadraticBezierCurve(fromX, fromY, cpX, cpY, toX, toY, out = [])
{
function quadraticBezierCurve(fromX, fromY, cpX, cpY, toX, toY, out = []) {
const n = 20;
const points = out;
......@@ -114,8 +134,7 @@ function quadraticBezierCurve(fromX, fromY, cpX, cpY, toX, toY, out = [])
let x = 0;
let y = 0;
for (let i = 0, j = 0; i <= n; ++i)
{
for (let i = 0, j = 0; i <= n; ++i) {
j = i / n;
// The Green Line
......@@ -128,6 +147,10 @@ function quadraticBezierCurve(fromX, fromY, cpX, cpY, toX, toY, out = [])
x = getPt(xa, xb, j);
y = getPt(ya, yb, j);
if (i === 0 && points[points.length - 2] === x && points[points.length - 1] === y) {
continue;
}
points.push(x, y);
}
......
src/2d/graphics/shapes/Polygon.ts
View file @ fc4461c8
......@@ -70,18 +70,18 @@ export default class Polygon {
return new Polygon(this.points.slice());
}
/**
* Closes the polygon, adding points if necessary.
*
*/
close() {
const points = this.points;
// close the poly if the value is true!
if (points[0] !== points[points.length - 2] || points[1] !== points[points.length - 1]) {
points.push(points[0], points[1]);
}
}
// /**
// * Closes the polygon, adding points if necessary.
// *
// */
// close() {
// const points = this.points;
// // close the poly if the value is true!
// if (points[0] !== points[points.length - 2] || points[1] !== points[points.length - 1]) {
// points.push(points[0], points[1]);
// }
// }
/**
* Checks whether the x and y coordinates passed to this function are contained within this polygon
......
src/2d/graphics/shapes/RoundedRectangle.ts
View file @ fc4461c8
......@@ -46,8 +46,8 @@ export default class RoundedRectangle {
//大于max取max
radius = radius > max ? max : radius;
//等于最大圆角时额外处理下，否则有点重合
if (radius == max) radius -= 0.0000000001
// //等于最大圆角时额外处理下，否则有点重合
// if (radius == max) radius -= 0.0000000001
this.radius = radius;
......
src/2d/graphics/styles/LineStyle.ts
View file @ fc4461c8
import FillStyle from './FillStyle';
import { LINE_ALIGNMENT } from '../../const';
import { LINE_ALIGNMENT, LINE_CAP, LINE_JOIN } from '../../const';
/**
* 图形的画线模式
......@@ -18,16 +18,30 @@ export default class LineStyle extends FillStyle {
width: number;
/**
* 线的对齐方式
* 默认LINE_ALIGNMENT.middle 0.5
* @default LINE_ALIGNMENT.middle 0.5
*/
alignment: LINE_ALIGNMENT;
/**
* Line cap style.
* @default LINE_CAP.BUTT
*/
cap = LINE_CAP.BUTT;
/**
* Line join style.
* @default LINE_JOIN.MITER
*/
join = LINE_JOIN.MITER;
/**
* Miter limit.
*/
miterLimit = 10;
/**
* Clones the object
*
* @return {LineStyle}
*/
clone():LineStyle {
const obj:LineStyle = new LineStyle();
clone(): LineStyle {
const obj: LineStyle = new LineStyle();
obj.color = this.color;
obj.alpha = this.alpha;
obj.texture = this.texture;
......@@ -36,6 +50,9 @@ export default class LineStyle extends FillStyle {
obj.width = this.width;
obj.alignment = this.alignment;
obj.native = this.native;
obj.cap = this.cap;
obj.join = this.join;
obj.miterLimit = this.miterLimit;
return obj;
}
/**
......@@ -48,5 +65,8 @@ export default class LineStyle extends FillStyle {
this.width = 0;
this.alignment = 0.5;
this.native = false;
this.cap = LINE_CAP.BUTT;
this.join = LINE_JOIN.MITER;
this.miterLimit = 10;
}
}
src/2d/graphics/utils/index.ts
View file @ fc4461c8
......@@ -144,4 +144,27 @@ export function bezierCurveLength(
}
return result;
}
\ No newline at end of file
}
/**
* 判断一系列点的顺逆时针方向，以后有需要用吧
* @see {@link https://stackoverflow.com/questions/1165647}
* 1、向量首尾相连，计算所有相邻向量的叉乘的和，正号逆时针（右手定则）
* 2、以(0,0)为原点，每两个点作为两个向量，叉乘的和就是面积的两倍，符号表示方向（同1）
* 3、下面这种 (x2 − x1)(y2 + y1).看不懂原理，但是计算过是一致的，正号顺时针（与上两种相反）
* @param points 一维点序列，比如[0,0,1,1,0,2]
* @param closed 是否连回起始点
* @returns true表示顺时针，false表示逆时针
*/
export function isPointsClockwise(points: ArrayLike<number>, closed: boolean = false): boolean {
let sum = 0;
for (let i = 0; i < points.length - 2; i += 2) {
sum += (points[i + 2] - points[i]) * (points[i + 3] + points[i + 1]);
}
//是否连回原点
if (closed) sum += (points[0] - points[points.length - 2]) * (points[1] + points[points.length - 1]);
// return sum > 0;
//当前2d坐标系，y轴朝下为正，所以判断反下，
return sum < 0;
}
src/2d/math/ObservablePoint.ts
View file @ fc4461c8
......@@ -32,7 +32,7 @@ export class ObservablePoint extends HashObject {
* @param {number} [x=0]
* @param {number} [y=0]
*/
set(x: number = 0, y: number = x) {
set(x: number, y: number) {
const _x = x || 0;
const _y = y || 0;
......
src/2d/renderers/plugins/CanvasGraphicsRenderer.ts
View file @ fc4461c8
......@@ -50,8 +50,12 @@ export class CanvasGraphicsRenderer {
const lineColor = lineStyle.color;
context.lineWidth = lineStyle.width;
//新增3个属性，还有个alignment不晓得应该咋搞好，TODO
context.lineCap = lineStyle.cap;
context.lineJoin = lineStyle.join;
context.miterLimit = lineStyle.miterLimit;
var ccw = true;
var ccw = true;//记录画洞的路径方向，填充默认用顺时针，所以画洞用逆时针
if (data.type === SHAPES.POLY) {
//必须每次清空子路径列表，因为每个data视为独立
......@@ -124,7 +128,7 @@ export class CanvasGraphicsRenderer {
const height = shape.height;
let radius = shape.radius;
const maxRadius = Math.min(width, height) / 2 | 0;
const maxRadius = Math.min(width, height) / 2 //| 0;
radius = radius > maxRadius ? maxRadius : radius;
......
src/2d/renderers/plugins/CanvasSpriteRenderer.ts
View file @ fc4461c8
import {CanvasRenderer} from '../CanvasRenderer';
import { CanvasRenderer } from '../CanvasRenderer';
import { SCALE_MODES, BLEND_MODES } from '../../const';
import { Matrix, GroupD8 } from '../../math';
import Sprite from '../../display/Sprite';
......@@ -58,7 +58,7 @@ export default class CanvasSpriteRenderer {
// // 如果遇到性能问题，先禁掉
// renderer.context[renderer.smoothProperty] = smoothingEnabled;
// }
if (sprite._anchorTexture) {
if (sprite._anchorTexture) {//sprite
if (texture.trim) {
dx = (texture.trim.width / 2) + texture.trim.x - (sprite._anchorTexture.x * texture.orig.width);
dy = (texture.trim.height / 2) + texture.trim.y - (sprite._anchorTexture.y * texture.orig.height);
......@@ -79,10 +79,14 @@ export default class CanvasSpriteRenderer {
dx -= width / 2;
dy -= height / 2;
} else {
dx = sprite["offsetX"] || 0;
dy = sprite["offsetY"] || 0;
} else if (sprite.instanceType == "Graphics") {//graphics
// dx = sprite["offsetX"] || 0;
// dy = sprite["offsetY"] || 0;
// console.log(sprite["offsetX"])
//不用offset或_offset,在Graphics里删除了，直接用_localBoundsSelf
const { x, y } = sprite._localBoundsSelf;
dx = x;
dy = y;
}
renderer.context.setTransform(
......@@ -143,8 +147,8 @@ export default class CanvasSpriteRenderer {
);
}
//如果处理过outerBlend
if (outerBlend) renderer.context.restore();
if (outerBlend) renderer.context.restore();
//以防万一，设置一次
renderer.setBlendMode(BLEND_MODES.NORMAL);
}
......
src/2d/text/TextField.ts
View file @ fc4461c8
......@@ -12,7 +12,7 @@ const padding = 10;
* 到时有离屏canvas再修改，现在离屏canvasios有问题，且文本模糊
* 继承Sprite，暂时发现，只需要切换bitmap和Sprite,TextField永远都是最新的，到时替换
* 动态文本类,有时需要在canvas里有一个动态文本,能根据我们的显示内容来改变
* @class TextFieldCon
* @class TextField
* @extends DisplayObject
* @since 1.0.0
* @public
......@@ -21,15 +21,15 @@ export class TextField extends Sprite {
private static shareCanvas: HTMLCanvasElement;
private static shareContext: CanvasRenderingContext2D;
canvas: HTMLCanvasElement;
context: CanvasRenderingContext2D;
private canvas: HTMLCanvasElement;
private context: CanvasRenderingContext2D;
/**
* 与其他类不同，用了Boolean，再考虑
*/
dirty: boolean;
private dirty: boolean;
offsetX: number;
offsetY: number;
// offsetX: number;
// offsetY: number;
constructor() {
super();
this._instanceType = "TextField";
......@@ -56,7 +56,7 @@ export class TextField extends Sprite {
// TextField.shareContext = TextField.shareCanvas.getContext("2d");
// }
// var baseTexture = new BaseTexture({
// data: [],
// _data: [],
// width: 0,
// height: 0,
// type: "text",
......@@ -636,9 +636,9 @@ export class TextField extends Sprite {
}
ctx.fillText(realLines[i], ox, upY + i * lineH + oy/*, maxW*/);//考虑去掉这个maxW
}
//offset用_anchorTexture代替
s.offsetX = -padding;
s.offsetY = -padding;
// //offset用_anchorTexture代替
// s.offsetX = -padding;
// s.offsetY = -padding;
// console.log(can)
this.anchorTexture = { x: (padding + 0.5) / canWidth, y: padding / canHeight }
// if (osType == "ios") {
......@@ -648,7 +648,7 @@ export class TextField extends Sprite {
// } else {
// var imgData = ctx.getImageData(0, 0, canWidth, canHeight)
// var data = {
// data: new Uint8Array(imgData.data),
// _data: new Uint8Array(imgData.data),
// width: canWidth,
// height: canHeight,
// type: "text",
......
test/testStroke.html
View file @ fc4461c8
......@@ -73,13 +73,36 @@
circle.x = 200;
circle.y = 200;
circle.clear();
circle.lineStyle(50, '0xff0000',1,0.5);
circle.lineStyle(50, '0xff0000',1,1);
// circle.beginFill('0xffffff', 0);
//画圆，注意，这里画圆依然是基于circle的坐标来画的，而不是舞台
circle.drawCircle(0, 0, 80);
circle.endFill();
// circle.moveTo(0,0).lineTo(0,100)
circle.updateLocalBoundsSelf()
console.log(circle._localBoundsSelf)
var line =stage.addChild( new FYGE.Graphics());
// line.beginFill(0)
// line.lineStyle(30, '0xff0000',1,1);
line.beginStroke(0xff0000,30,"square","round",10,1,1)
line.moveTo(30,530)
line.lineTo(120,560)
line.lineTo(60,660)
line.lineTo(200,660)
// line.lineTo(30,530)
// line.closePath()
setTimeout(()=>{
console.log(line.verts)
console.log(line.indices)
},1000)
var gg = stage.addChild( new FYGE.Graphics())
gg.beginFill(0xff0000)
.lineStyle(10,0xffff00,1,1)
.drawRoundedRect(300,300,300,300,150)
}, this);
//循环
......
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