feat: fabric 初始化 canvas|Util|Object 类

一些机制/TS 小技巧.md

@@ -0,0 +1,32 @@
+## @导入路径的问题
+大家在日常开发的时候，可能会经常用到webpack的路径别名，比如: import xxx from '@/path/to/name'，如果编辑器不做任何配置的话，这样写会很尴尬，编译器不会给你任何路径提示，更不会给你语法提示。这里有个小技巧，基于 tsconfig.json 的 baseUrl和paths这两个字段，配置好这两个字段后，.ts文件里不但有了路径提示，还会跟踪到该路径进行语法提示。
+可以把 tsconfig.json 重命名成jsconfig.json，.js文件里也能享受到路径别名提示和语法提示了。
+
+## 将 ts 打包成一个 umd 文件
+对于 amd 和 system 模块，可以配置 tsconfig.json 中的 outFile 字段，输出为一个 js 文件。如果需要输出成其他模块，例如 umd ，又希望打包成一个单独的文件，需要怎么做？可以使用 rollup 或者 webpack ：
+// rollup.config.js
+const typescript = require('rollup-plugin-typescript2')
+
+module.exports = {
+  input: './index.ts',
+  output: {
+    name: 'MyBundle',
+    file: './dist/bundle.js',
+    format: 'umd'
+  },
+  plugins: [
+    typescript()
+  ]
+}
+
+## 一些常用的 ts 周边库
+
+@typescript-eslint/eslint-plugin、@typescript-eslint/parser - lint 套件
+DefinitelyTyped - @types 仓库
+ts-loader、rollup-plugin-typescript2 - rollup、webpack 插件
+typedoc - ts 项目自动生成 API 文档
+typeorm - 一个 ts 支持度非常高的、易用的数据库 orm 库
+nest.js、egg.js - 支持 ts 的服务端框架
+ts-node - node 端直接运行 ts 文件
+utility-types - 一些实用的 ts 类型工具
+type-coverage - 静态类型覆盖率检测

图形学/fabric/src/Canvas.ts

@@ -1,6 +1,7 @@
 import { Util } from './Util';
 import { Point } from './Point';
 import { Bounding, Offset } from './interface';
+import { fabric } from '.';
 
 const CANVAS_INIT_ERROR = new Error('Could not initialize `canvas` element');
 
@@ -220,3 +221,7 @@ export class Canvas extends StaticCanvas {
         this.contextCache = this.cacheCanvasEl.getContext('2d');
     }
 }
+
+fabric.StaticCanvas = StaticCanvas
+fabric.FreeDrawing = FreeDrawing
+fabric.Canvas = Canvas

图形学/fabric/src/Object.ts

@@ -0,0 +1,135 @@
+import { Util } from './Util';
+import { Shadow } from './Shadow';
+import { fabric } from './index';
+export class FabricObject {
+    /** 物体的标识，比如 rect, circle, path */
+    public type: string = 'object';
+    /** Horizontal origin of transformation of an object (one of "left", "right", "center") */
+    public originX: string = 'center';
+    /** Vertical origin of transformation of an object (one of "top", "bottom", "center") */
+    public originY: string = 'center';
+    public top: number = 0;
+    public left: number = 0;
+    public width: number = 0;
+    public height: number = 0;
+    public scaleX: number = 1;
+    public scaleY: number = 1;
+    public angle: number = 0;
+    public opacity: number = 1;
+    /** When true, an object is rendered as flipped horizontally */
+    public flipX: boolean = false;
+    /** When true, an object is rendered as flipped vertically */
+    public flipY: boolean = false;
+    /** Size of object's corners (in pixels) */
+    public cornerSize: number = 12;
+    /** When true, object's corners are rendered as transparent inside (i.e. stroke instead of fill) */
+    public transparentCorners: boolean = true;
+    public padding: number = 0;
+    public borderColor: string = 'rgba(102,153,255,0.75)';
+    public cornerColor: string = 'rgba(102,153,255,0.75)';
+    public fill: string = 'rgb(0,0,0)';
+    /** Overlay fill (takes precedence over fill value) */
+    public fillRule: string = 'source-over';
+    public overlayFill: string;
+    public stroke: string;
+    public strokeWidth: number = 1;
+    public strokeDashArray: any[];
+    public shadow: Shadow;
+    public borderOpacityWhenMoving: number = 0.4;
+    public borderScaleFactor: number = 1;
+    public transformMatrix: number[];
+    public minScaleLimit: number = 0.01;
+    public selectable: boolean = true;
+    public visible: boolean = true;
+    public hasControls: boolean = true;
+    public hasBorders: boolean = true;
+    public hasRotatingPoint: boolean = true;
+    public rotatingPointOffset: number = 40;
+    /** When set to `true`, objects are "found" on canvas on per-pixel basis rather than according to bounding box */
+    public perPixelTargetFind: boolean = false;
+    /** Function that determines clipping of an object (context is passed as a first argument) */
+    public includeDefaultValues: boolean = true;
+    public clipTo: Function;
+    public originalState: null;
+    /**
+     * List of properties to consider when checking if state of an object is changed (fabric.Object#hasStateChanged);
+     * as well as for history (undo/redo) purposes
+     */
+    public stateProperties: string[] = ('top left width height scaleX scaleY flipX flipY ' + 'angle opacity cornerSize fill overlayFill originX originY ' + 'stroke strokeWidth strokeDashArray fillRule ' + 'borderScaleFactor transformMatrix selectable shadow visible').split(' ');
+    // ('top left width height scaleX scaleY flipX flipY ' +
+    // 'theta angle opacity cornersize fill overlayFill ' +
+    // 'stroke strokeWidth strokeDashArray fillRule ' +
+    // 'borderScaleFactor transformMatrix selectable').split(' ')
+
+    constructor(options) {
+        this.initialize(options);
+    }
+    initialize(options) {
+        options && this.setOptions(options);
+    }
+    setOptions(options) {
+        for (let prop in options) {
+            this.set(prop, options[prop]);
+        }
+        this._initGradient(options);
+        this._initPattern(options);
+        this._initShadow(options);
+    }
+    _initGradient(options) {}
+    _initPattern(options) {}
+    _initShadow(options) {}
+    get(property) {
+        return this[property];
+    }
+    set(key, value) {
+        if (typeof key === 'object') {
+            for (var prop in key) {
+                this._set(prop, key[prop]);
+            }
+        } else {
+            if (typeof value === 'function') {
+                this._set(key, value(this.get(key)));
+            } else {
+                this._set(key, value);
+            }
+        }
+        return this;
+    }
+    _set(key, value) {
+        var shouldConstrainValue = key === 'scaleX' || key === 'scaleY';
+
+        if (shouldConstrainValue) {
+            value = this._constrainScale(value);
+        }
+        if (key === 'scaleX' && value < 0) {
+            this.flipX = !this.flipX;
+            value *= -1;
+        } else if (key === 'scaleY' && value < 0) {
+            this.flipY = !this.flipY;
+            value *= -1;
+        } else if (key === 'width' || key === 'height') {
+            this.minScaleLimit = Util.toFixed(Math.min(0.1, 1 / Math.max(this.width, this.height)), 2);
+        }
+
+        this[key] = value;
+
+        return this;
+    }
+    hasStateChanged() {
+        return this.stateProperties.some(function (prop) {
+            return this[prop] !== this.originalState[prop];
+        }, this);
+    }
+    saveState() {
+        this.stateProperties.forEach(function (prop) {
+            this.originalState[prop] = this.get(prop);
+        }, this);
+        return this;
+    }
+    setupState() {
+        this.originalState = {};
+        this.saveState();
+    }
+}
+
+fabric.Object = FabricObject;

图形学/fabric/src/Util.ts

@@ -1,8 +1,10 @@
 import { Point } from './Point';
 import { AnimateOptions, Offset } from './interface';
-import { PathGroup, Group } from './Path';
+import { Group } from './Path';
+import { PathGroup } from './PathGroup';
 import { Observable } from './Observable';
 import { Ease } from './Ease';
+import { fabric } from '.';
 
 const PiBy180 = Math.PI / 180;
 const emptyFn = () => {};
@@ -141,7 +143,7 @@ export class Util {
     /**
      * 数组的最小值
      */
-    static min(array, byProperty = '') {
+    static min(array: any[], byProperty = '') {
         if (!array || array.length === 0) return undefined;
 
         let i = array.length - 1,
@@ -165,7 +167,7 @@ export class Util {
     /**
      * 数组的最大值
      */
-    static max(array, byProperty = '') {
+    static max(array: any[], byProperty = '') {
         if (!array || array.length === 0) return undefined;
 
         let i = array.length - 1,
@@ -185,6 +187,9 @@ export class Util {
         }
         return result;
     }
+    static toArray(arrayLike) {
+        return [].slice.call(arrayLike, 0);
+    }
     static getRandomInt(min: number, max: number): number {
         return Math.floor(Math.random() * (max - min + 1)) + min;
     }
@@ -446,7 +451,7 @@ export class Util {
         scriptEl.src = url;
         headEl.appendChild(scriptEl);
     }
-    static getById(id) {
+    static getById(id: string | HTMLElement): HTMLElement {
         return typeof id === 'string' ? document.getElementById(id) : id;
     }
     /** 新建元素并添加相应属性 */
@@ -536,3 +541,5 @@ export class Util {
     static ease = Ease;
     static Observable = Observable;
 }
+
+fabric.Util = Util;

图形学/fabric/src/index.ts

@@ -1,5 +1 @@
-import { Canvas } from './Canvas';
-
-export const fabric = {
-    Canvas,
-};
+export const fabric: any = {};

图形学/fabric/src/log.ts

@@ -0,0 +1,8 @@
+import { fabric } from './index';
+
+fabric.log = (...args) => {
+    console.log.call(console, ...args);
+}
+fabric.warn = (...args) => {
+    console.warn.call(console, ...args);
+}