Commit e302678e authored by wjf's avatar wjf

l

parent ebb15be7
# 所有空行或者以注释符号 # 开头的行都会被 Git 忽略。
# 可以使用标准的 glob 模式匹配。
# 匹配模式最后跟反斜杠(/)说明要忽略的是目录。
# 要忽略指定模式以外的文件或目录,可以在模式前加上惊叹号(! )取反。
# 所谓的 glob 模式是指 shell 所使用的简化了的正则表达式。星号(*)匹配零个或多个任
# 意字符; [abc] 匹配任何一个列在方括号中的字符(这个例子要么匹配一个 a,要么匹配一
# 个 b,要么匹配一个 c);问号(?)只匹配一个任意字符;如果在方括号中使用短划线分
# 隔两个字符,表示所有在这两个字符范围内的都可以匹配(比如 [0-9] 表示匹配所有 0 到
# 9 的数字)。
# 书上的一个例子
# #此为注释 – 将被 Git 忽略
# *.a
# 忽略所有 .a 结尾的文件
# !lib.a
# 但 lib.a 除外
# /TODO
# 仅仅忽略项目根目录下的 TODO 文件,不包括 subdir/TODO
# build/
# 忽略 build/ 目录下的所有文件
# doc/*.txt
# 会忽略 doc/notes.txt 但不包括 doc/server/arch.txt
node_modules
11.png

76.1 KB

This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="full-screen" content="true" />
<meta name="screen-orientation" content="portrait" />
<meta name="x5-fullscreen" content="true" />
<meta name="360-fullscreen" content="true" />
<!-- <meta name="viewport" content="width=device-width,minimum-scale=1.0,user-scalable=no"> -->
<style>
html,
body {
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background-color: white;
}
/* .top {
width: 100%;
height: 100px;
} */
</style>
</head>
<body>
<script type="text/javascript" src="./build/render.min.js"></script>
<div id="cusEngine" style="line-height:0;font-size:0"></div>
<script>
var stage = new render.Stage(
"cusEngine",
750,
1206,
60,
render.constant.StageScaleMode.FIXED_WIDTH,
render.constant.RENDERER_TYPE.WEBGL
);
//启动循环
render.Stage.flushAll();
stage.addChild(render.Sprite.from("./11.png"));
</script>
</body>
</html>
\ No newline at end of file
{
"name": "aaaa",
"version": "1.0.0",
"description": "",
"main": "index.js",
"types": "index.d.ts",
"dependencies": {
"ts-loader": "^4.0.0",
"webpack": "^4.1.0",
"webpack-dev-server": "^3.1.0",
"typescript": "^2.7.2",
"uglifyjs-webpack-plugin": "^2.1.2"
},
"devDependencies": {
"webpack-cli": "^3.3.2",
"protobufjs": "^6.8.0"
},
"scripts": {
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack -w",
"watch": "webpack --watch"
},
"author": "",
"license": "ISC"
}
\ No newline at end of file
/**
* 基础
*/
export abstract class HashObject {
protected _instanceId: number = 0;
protected _instanceType: string = "HashObject";
protected static _object_id = 0;
constructor() {
this._instanceId = HashObject._object_id++;
}
/**
* 每一个对象都会有一个唯一的id码。
* @property instanceId
* @public
* @since 1.0.0
* @return {number}
* @readonly
* @example
* //获取 对象唯一码
* trace(this.instanceId);
*/
public get instanceId(): number {
return this._instanceId;
}
/**
* 每一个类都有一个实例类型字符串,通过这个字符串,你能知道这个实例是从哪个类实例而来
* @property instanceType
* @since 1.0.3
* @public
* @return {string}
* @readonly
*/
public get instanceType(): string {
return this._instanceType;
}
/**
* 销毁一个对象
* 销毁之前一定要从显示对象移除,否则将会出错
* @method destroy
* @since 2.0.0
* @public
* @return {void}
*/
abstract destroy(): void;
}
/**
* Created by rockyl on 2018/11/5.
*/
import { HashObject } from "../HashObject";
import { DisplayObject } from "../display/DisplayObject";
/**
* 组件基类
*/
export class Component extends HashObject {
/**
* 所依附的显示对象
*/
entity: DisplayObject;
/**
* 是否有效
*/
protected _enabled: boolean
constructor() {
super();
this._instanceType = "Component";
this.onCreate();
}
/**
* 是否有效状态
*/
get enabled(): boolean {
return this._enabled;
}
set enabled(value: boolean) {
if (this._enabled !== value) {
this._enabled = value;
if (this._enabled) {
this.onEnable();
} else {
this.onDisable();
}
}
}
/**
* 装配实体
* @param entity
*/
_setup(entity: DisplayObject) {
this.entity = entity;
}
/**
* 卸载实体
*/
_unSetup() {
this.entity = null;
}
/**
* 当组件被创建时
*/
onCreate() {
}
/**
* 当组件生效时
*/
onEnable() {
}
/**
* 当组件失效时
*/
onDisable() {
}
/**
* 更新
*/
onUpdate() {
}
/**
* 当组件被销毁时
*/
onDestroy() {
}
destroy() {
this.onDestroy();
}
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
import { Event } from "../events/Event";
import { DisplayObject } from "./DisplayObject";
import { devicePixelRatio } from "../const";
/**
* 此类对于需要在canvas上放置html其他类型元素的时候非常有用<br/>
* 比如有时候我们需要放置一个注册,登录或者其他的内容.这些内容包含了输入框<br/>
* 或者下拉框什么的,无法在canvas里实现,但这些元素又跟canvas里面的元素<br/>
* 位置,大小,缩放对应.就相当于是一个显示对象一样。可以随意设置他的<br/>
* 属性,那么将你的html元素通过此类封装成显示对象再合适不过了
* 不能用于容器
* @class FloatDisplay
* @extends DisplayObject
* @public
* @since 1.0.0
*/
export class FloatDisplay extends DisplayObject {
/**
* 需要封装起来的html元素的引用。你可以通过这个引用来调用或设置此元素自身的属性方法和事件,甚至是样式
* @property htmlElement
* @public
* @since 1.0.0
* @type{HtmlElement}
*/
public htmlElement: any = null;
/**
* 是否已经添加了舞台事件
* @property _isAdded
* @since 1.0.0
* @type {boolean}
* @private
*/
private _isAdded: boolean = false;
/**
* 记录是否需要修改位置矩阵
*/
private _transformID: number;
/**
* 构造函数
* @method FloatDisplay
* @since 1.0.0
* @public
* @example
* var floatDisplay = new FloatDisplay();
* floatDisplay.init(document.getElementById('aaa'));
* s.addChild(floatDisplay);
*
* <p><a href="" target="_blank">测试链接</a></p>
*
* @example
* //创建悬浮的html元素
* var section = document.createElement('section');
* section.id = "rule";
* section.style.overflowX = "hidden";
* section.style.overflowY = "auto";
* section.style.width = w + "px";
* section.style.height = h + "px";
* section.style.lineHeight = lh + "px";
* section.style.fontFamily = '微软雅黑';
* section.style.fontSize = fs + 'px';
* section.style.color = "#ffffff";
* //创建Floatview 把我们要悬浮的元素封装进去
* var rule = new FloatDisplay();
* stage.addChild(rule);
* rule.x = ox;
* rule.y = oy;
* rule.init(this.section);
* section.innerHTML = DataManager.ins.getData("ajaxElement").data.rule;
*
*/
public constructor() {
super();
let s = this;
s._instanceType = "FloatDisplay";
s.addEventListener(Event.REMOVED_FROM_STAGE, function (e: Event) {
if (s.htmlElement) {
s.htmlElement.style.display = "none";
}
});
s.addEventListener(Event.ADDED_TO_STAGE, function (e: Event) {
if (s.htmlElement) {
let style = s.htmlElement.style;
if (!s._isAdded) {
s._isAdded = true;
s.stage.rootDiv.insertBefore(s.htmlElement, s.stage.rootDiv.childNodes[0]);
s.stage["_floatDisplayList"].push(s);
} else {
if (s.htmlElement && s.visible) {
style.display = "block";
}
}
}
});
this._transformID = -1;
}
/**
* 初始化方法,htmlElement 一定要设置width和height样式,并且一定要用px单位
* @method init
* @public
* @since 1.0.0
* @param {HtmlElement} htmlElement 需要封装起来的html元素的引用。你可以通过这个引用来调用或设置此元素自身的属性方法和事件,甚至是样式
*/
public init(htmlElement: any): void {
let s = this;
let she: any;
if (typeof (htmlElement) == "string") {
she = document.getElementById(htmlElement);
} else if (htmlElement._instanceType == "Video") {
she = htmlElement.media;
} else {
she = htmlElement;
}
let style = she.style;
style.position = "absolute";
style.display = "none";
style.transformOrigin = style.WebkitTransformOrigin = "0 0 0";
let ws = s.getStyle(she, "width");
let hs = s.getStyle(she, "height");
let w = 0, h = 0;
if (ws.indexOf("px")) {
w = parseInt(ws);
}
if (hs.indexOf("px")) {
h = parseInt(hs);
}
// s._bounds.width = w;
// s._bounds.height = h;
s._localBoundsSelf.width = w;
s._localBoundsSelf.height = h;
s.htmlElement = she;
}
/**
* @method getStyle
* @param {HTMLElement} elem
* @param cssName
* @return {any}
*/
private getStyle(elem: HTMLElement, cssName: any): any {
//如果该属性存在于style[]中,则它最近被设置过(且就是当前的)
if (elem.style[cssName]) {
return elem.style[cssName];
}
if (document.defaultView && document.defaultView.getComputedStyle) {
//它使用传统的"text-Align"风格的规则书写方式,而不是"textAlign"
cssName = cssName.replace(/([A-Z])/g, "-$1");
cssName = cssName.toLowerCase();
//获取style对象并取得属性的值(如果存在的话)
let s = document.defaultView.getComputedStyle(elem, "");
return s && s.getPropertyValue(cssName);
}
return null;
}
/**
* @method updateStyle
* @public
* @since 1.1.4
*/
public updateStyle(): void {
let s = this;
let o = s.htmlElement;
if (o) {
let style = o.style;
let visible = s.visible;
//还得考虑是否在stage里
if (!s.stage) {
visible = false
}
if (visible) {
let parent = s.parent;
while (parent) {
if (!parent.visible) {
visible = false;
break;
}
parent = parent.parent;
}
}
let show = visible ? "block" : "none";
if (show != style.display) {
style.display = show;
}
if (visible) {
if (this._transformID != this.transform._worldID) {
this._transformID = this.transform._worldID
let mtx = s.transform.worldMatrix;
let d = devicePixelRatio;
style.transform = style.webkitTransform = "matrix(" + (mtx.a / d).toFixed(4) + "," + (mtx.b / d).toFixed(4) + "," + (mtx.c / d).toFixed(4) + "," + (mtx.d / d).toFixed(4) + "," + (mtx.tx / d).toFixed(4) + "," + (mtx.ty / d).toFixed(4) + ")";
}
style.opacity = s.worldAlpha;
}
}
}
public destroy(): void {
//清除相应的数据引用
let s = this;
let elem = s.htmlElement;
if (elem) {
elem.style.display = "none";
if (elem.parentNode) {
elem.parentNode.removeChild(elem);
}
s._isAdded = false;
s.htmlElement = null;
}
let sf: any = s.stage["_floatDisplayList"];
let len = sf.length;
for (let i = 0; i < len; i++) {
if (sf[i] == s) {
sf.splice(i, 1);
break;
}
}
super.destroy();
}
}
This diff is collapsed.
This diff is collapsed.
export { default as Container } from './Container';
export { DisplayObject } from './DisplayObject';
export { FloatDisplay } from "./FloatDisplay";
export { default as Sprite } from "./Sprite";
export { Stage } from "./Stage";
\ No newline at end of file
import { HashObject } from "../HashObject";
/**
* 事件类,引擎中一切事件的基类
* @class Event
* @extends AObject
* @public
* @since 1.0.0
*/
export class Event extends HashObject {
// public static IMAGE_LOADED: string = "onImageLoaded"
/**
* 舞台尺寸发生变化时触发
* @Event
* @property RESIZE
* @type {string}
* @static
* @public
* @since 1.0.0
*/
public static RESIZE: string = "onResize";
/**
* ScrollPage组件滑动到开始位置事件
* @property ON_SCROLL_TO_HEAD
* @static
* @since 1.1.0
* @type {string}
*/
public static ON_SCROLL_TO_HEAD: string = "onScrollToHead";
/**
* ScrollPage组件停止滑动事件
* @property ON_SCROLL_STOP
* @static
* @since 1.1.0
* @type {string}
*/
public static ON_SCROLL_STOP: string = "onScrollStop";
/**
* ScrollPage组件开始滑动事件
* @property ON_SCROLL_START
* @static
* @since 1.1.0
* @type {string}
*/
public static ON_SCROLL_START: string = "onScrollStart";
/**
* ScrollPage组件滑动到结束位置事件
* @property ON_SCROLL_TO_END
* @static
* @since 1.1.0
* @type {string}
*/
public static ON_SCROLL_TO_END: string = "onScrollToEnd";
/**
* 舞台初始化完成后会触发的事件
* @property ON_INIT_STAGE
* @type {string}
* @static
* @public
* @since 1.0.0
*/
public static ON_INIT_STAGE: string = "onInitStage";
/**
* 显示对象加入到舞台事件
* @Event
* @property ADD_TO_STAGE
* @type {string}
* @static
* @public
* @since 1.0.0
*/
public static ADDED_TO_STAGE: string = "onAddedToStage";
/**
* 显示对象从舞台移出事件
* @Event
* @property REMOVE_TO_STAGE
* @type {string}
* @static
* @public
* @since 1.0.0
*/
public static REMOVED_FROM_STAGE: string = "onRemovedFromStage";
/**
* 显示对象 循环帧事件
* @Event
* @property ENTER_FRAME
* @type {string}
* @static
* @public
* @since 1.0.0
*/
public static ENTER_FRAME: string = "onEnterFrame";
/**
* MovieClip 播放完成事件
* @Event
* @property END_FRAME
* @type {string}
* @static
* @public
* @since 1.0.0
*/
public static END_FRAME: string = "onEndFrame";
/**
* MovieClip 帧标签事件
* @Event
* @property CALL_FRAME
* @type {string}
* @static
* @public
* @since 1.0.0
*/
public static CALL_FRAME: string = "onCallFrame";
/**
* 完成事件
* @Event
* @property COMPLETE
* @type {string}
* @static
* @public
* @since 1.0.0
*/
public static COMPLETE: string = "onComplete";
/**
* 加载过程事件
* @Event
* @property PROGRESS
* @type {string}
* @static
* @public
* @since 1.0.0
*/
public static PROGRESS: string = "onProgress";
/**
* 出错事件
* @Event
* @property ERROR
* @type {string}
* @static
* @public
* @since 1.0.0
*/
public static ERROR: string = "onError";
/**
* 中断事件
* @Event
* @property ABORT
* @type {string}
* @static
* @public
* @since 1.0.0
*/
public static ABORT: string = "onAbort";
/**
* 开始事件
* @Event
* @property START
* @type {string}
* @static
* @public
* @since 1.0.0
*/
public static START: string = "onStart";
/**
* 定时器触发事件
* @property TIMER
* @static
* @since 1.0.9
* @public
* @type {string}
*/
public static TIMER: string = "onTimer";
/**
* 定时器完成事件
* @property TIMER_COMPLETE
* @since 1.0.9
* @static
* @public
* @type {string}
*/
public static TIMER_COMPLETE: string = "onTimerComplete";
/**
* 事件类型名
* @property type
* @type {string}
* @public
* @since 1.0.0
*/
public type: string = "";
/**
* 触发此事件的对象
* @property target
* @public
* @since 1.0.0
* @type {any}
*/
public target: any = null;
/**
* 随着事件一起附带的信息对象
* 所有需要随事件一起发送的信息都可以放在此对象中
* @property data
* @public
* @since 1.0.0
* @type {any}
* @default null
*/
public data: any = null;
/**
* @method Event
* @param {string} type 事件类型
* @public
* @since 1.0.0
*/
public constructor(type: string) {
super();
this._instanceType = "Event";
this.type = type;
}
/**
* 防止对事件流中当前节点中和所有后续节点中的事件侦听器进行处理。
* @method stopImmediatePropagation
* @public
* @return {void}
* @since 2.0.0
*/
public stopImmediatePropagation(): void {
this._pd = true;
}
/**
* 防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理。
* @method stopPropagation
* @public
* @since 2.0.0
* @return {void}
*/
public stopPropagation(): void {
this._bpd = true;
}
private _bpd: boolean = false;
/**
* 是否阻止事件向下冒泡
* @property _pd
* @type {boolean}
* @private
* @since 1.0.0
*/
private _pd: boolean = false;
public destroy(): void {
let s = this;
s.target = null;
s.data = null;
}
/**
* 重围事件到初始状态方便重复利用
* @method reset
* @param {string} type
* @param target
* @since 2.0.0
* @return {void}
* @public
*/
public reset(type: string, target: any): void {
let s = this;
s.target = target;
s._pd = false;
s._bpd = false;
s.type = type;
}
}
This diff is collapsed.
export class GDispatcher {
/**
* 事件回调池
*/
private static callbackPool: any = {};
/**
* 事件作用域池
*/
private static thisObjPool: any = {};
/**
*
* @param name 事件名
* @param callback 回调
* @param thisObj 作用域
*/
public static addEvent(name: string, callback, thisObj: any): void {
if (!this.callbackPool[name]) {
this.callbackPool[name] = [];
this.thisObjPool[name] = [];
}
const index: number = this.callbackPool[name].indexOf(callback);
if (index != -1) {
this.callbackPool[name][index] = callback;
this.thisObjPool[name][index] = thisObj;
} else {
this.callbackPool[name].push(callback);
this.thisObjPool[name].push(thisObj);
}
}
/**
*
* @param name 事件名
* @param callback 回调
* @param thisObj 作用域
*/
public static removeEvent(name: string, callback, thisObj?: any): void {
if (this.callbackPool[name]) {
const index: number = this.callbackPool[name].indexOf(callback);
if (index != -1) {
this.callbackPool[name].splice(index, 1);
this.thisObjPool[name].splice(index, 1);
}
}
}
/**
* 派发事件
* @param name 事件名
* @param args 任意参数
*/
public static dispatchEvent(name: string, ...args): void {
const callbacks: Function[] = this.callbackPool[name];
const thisObjs: any = this.thisObjPool[name];
if (callbacks) {
let i = 0;
const len: number = callbacks.length;
for (i; i < len; i++) {
callbacks[i].apply(thisObjs[i], args);
}
}
}
}
\ No newline at end of file
import { Event } from "./Event";
import { DisplayObject } from "../display/DisplayObject";
/**
* 鼠标事件类,电脑端鼠标,移动设备端的触摸都使用此事件来监听
* @class MouseEvent
* @extends Event
* @public
* @since 1.0.0
*/
export class MouseEvent extends Event {
/**
* 鼠标或者手指按下事件
* @property MOUSE_DOWN
* @static
* @public
* @since 1.0.0
* @type {string}
*/
public static MOUSE_DOWN: string = "onMouseDown";
/**
* 鼠标或者手指抬起事件
* @property MOUSE_UP
* @static
* @public
* @since 1.0.0
* @type {string}
*/
public static MOUSE_UP: string = "onMouseUp";
/**
* 鼠标或者手指单击
* @property CLICK
* @static
* @public
* @since 1.0.0
* @type {string}
*/
public static CLICK: string = "onMouseClick";
/**
* 鼠标或者手指移动事件
* @property MOUSE_MOVE
* @static
* @public
* @since 1.0.0
* @type {string}
*/
public static MOUSE_MOVE: string = "onMouseMove";
/**
* 鼠标或者手指移入到显示对象上里触发的事件
* @property MOUSE_OVER
* @static
* @public
* @since 1.0.0
* @type {string}
*/
public static MOUSE_OVER: string = "onMouseOver";
/**
* 鼠标或者手指移出显示对象边界触发的事件
* @property MOUSE_OUT
* @static
* @public
* @since 1.0.0
* @type {string}
*/
public static MOUSE_OUT: string = "onMouseOut";
/**
* mouse或touch事件时rootDiv坐标x点
* @property clientX
* @public
* @since 1.0.0
* @type {number}
*/
public clientX: number = 0;
/**
* mouse或touch事件时rootDiv坐标y点
* @property clientY
* @public
* @since 1.0.0
* @type {number}
*/
public clientY: number = 0;
/**
* mouse或touch事件时全局坐标x点
* @property stageX
* @public
* @since 1.0.0
* @type {number}
*/
public stageX: number = 0;
/**
* mouse或touch事件时全局坐标y点
* @property stageY
* @public
* @since 1.0.0
* @type {number}
*/
public stageY: number = 0;
/**
* mouse或touch事件时本地坐标x点
* @property localX
* @public
* @since 1.0.0
* @type {number}
*/
public localX: number = 0;
/**
* mouse或touch事件时本地坐标y点
* @property localY
* @public
* @since 1.0.0
* @type {number}
*/
public localY: number = 0;
/**
* 绑定此事件的侦听对象,一般target是最终点击的对象
* @property currentTarget
* @public
* @since 1.0.0
* @type{DisplayObject}
* @default null
*/
public currentTarget: DisplayObject = null;
/**
* 触摸或者鼠标事件的手指唯一标识
* @property identifier
* @type {number}
* @since 1.1.2
* @public
*/
public identifier: any = 0;
/**
* @method MouseEvent
* @public
* @since 1.0.0
* @param {string} type
*/
public constructor(type: string) {
super(type);
this._instanceType = "MouseEvent";
}
/**
* 事件后立即更新显示列表状态
* @method updateAfterEvent
* @since 1.0.9
* @public
*/
public updateAfterEvent() {
this.target.stage._cp = true;
}
public destroy(): void {
//清除相应的数据引用
let s = this;
s.currentTarget = null;
super.destroy();
}
}
\ No newline at end of file
This diff is collapsed.
import Circle from "./shapes/Circle";
import { Rectangle, Matrix } from "../math";
import Ellipse from "./shapes/Ellipse";
import Polygon from "./shapes/Polygon";
import RoundedRectangle from "./shapes/RoundedRectangle";
import { HashObject } from "../HashObject";
import LineStyle from "./styles/LineStyle";
import FillStyle from "./styles/FillStyle";
/**
* A GraphicsData object.
* 记录图形数据
*/
export default class GraphicsData extends HashObject {
fillStyle: FillStyle;
lineStyle: LineStyle;
matrix: Matrix;
holes: any[];
/**
* The shape object to draw.
* @member {Circle|Ellipse|Polygon|Rectangle|RoundedRectangle}
*/
shape: any;
/**
* The type of the shape, see the Const.Shapes file for all the existing types,
* @member {number}
*/
type: number;
/**
* 点的一维数组[x,y,x1,y1,x2,y2]
* 存下shape的点数据,因为如果shape不是poly不会特意存下points
*/
points: number[]
/**
*
*/
constructor(
shape: Circle | Rectangle | Ellipse | Polygon | RoundedRectangle,
fillStyle: FillStyle = null,
lineStyle: LineStyle = null,
matrix: Matrix = null
) {
super();
this._instanceType = "GraphicsData"
this.shape = shape;
this.lineStyle = lineStyle;
this.fillStyle = fillStyle;
this.matrix = matrix;
this.holes = [];
this.type = shape.type;
this.points = [];
}
/**
* Creates a new GraphicsData object with the same values as this one.
*
* @return {GraphicsData} Cloned GraphicsData object
*/
clone(): GraphicsData {
return new GraphicsData(
this.shape,
this.fillStyle,
this.lineStyle,
this.matrix
);
}
/**
* Destroys the Graphics data.
*/
destroy() {
this.shape = null;
this.holes.length = 0;
this.holes = null;
this.points.length = 0;
this.points = null;
this.lineStyle = null;
this.fillStyle = null;
}
}
This diff is collapsed.
import { SHAPES } from "../../const";
import GraphicsData from "../GraphicsData";
import Graphics from "../Graphics";
/**
* Builds a circle to draw
*
* Ignored from docs since it is not directly exposed.
*
* @ignore
* @private
* @param {WebGLGraphicsData} graphicsData - The graphics object to draw
* @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 {
build(graphicsData: GraphicsData) {
// need to convert points to a nice regular data
const circleData = graphicsData.shape;
const points = graphicsData.points;
const x = circleData.x;
const y = circleData.y;
let width;
let height;
points.length = 0;
// TODO - bit hacky??
if (graphicsData.type === SHAPES.CIRC) {
width = circleData.radius;
height = circleData.radius;
}
else {
width = circleData.width;
height = circleData.height;
}
if (width === 0 || height === 0) {
return;
}
let totalSegs = Math.floor(30 * Math.sqrt(circleData.radius))
|| Math.floor(15 * Math.sqrt(circleData.width + circleData.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)
);
}
points.push(
points[0],
points[1]
);
},
triangulate(graphicsData, graphicsGeometry:Graphics) {
const points = graphicsData.points;
const verts = graphicsGeometry.verts;
const indices = graphicsGeometry.indices;
let vertPos = verts.length / 2;
const center = vertPos;
verts.push(graphicsData.shape.x, graphicsData.shape.y);
for (let i = 0; i < points.length; i += 2) {
verts.push(points[i], points[i + 1]);
// add some uvs
indices.push(vertPos++, center, vertPos);
}
},
};
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;
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++);
}
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
export {default as Circle} from './Circle';
export {default as Ellipse} from './Ellipse';
export {default as Polygon} from './Polygon';
export {default as RoundedRectangle} from './RoundedRectangle';
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
export { Matrix } from './Matrix';
export { Point } from './Point';
export { ObservablePoint } from './ObservablePoint';
export { Rectangle } from './Rectangle';
// export {default as Transform} from './Transform';
export { default as Transform } from './Transform';
export { default as GroupD8 } from './GroupD8';
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
export { VideoEntity } from "./VideoEntity";
export { MovieClip } from "./MovieClip";
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
export { TextField } from "./TextField";
export { InputText } from "./InputText";
export { EditableText } from "./EditableText";
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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