UNPKG

184 kBTypeScriptView Raw
1// This module does not really exist.
2// This is just to get `export as namespace fabric;` to work and to be re-exportable from `index.d.ts`.
3
4export as namespace fabric;
5
6export const isLikelyNode: boolean;
7export const isTouchSupported: boolean;
8export const version: string;
9export let textureSize: number;
10
11/////////////////////////////////////////////////////////////
12// fabric Functions
13/////////////////////////////////////////////////////////////
14
15export function createCanvasForNode(width: number, height: number): Canvas;
16
17// Parse
18// ----------------------------------------------------------
19/**
20 * Creates markup containing SVG referenced elements like patterns, gradients etc.
21 * @param canvas instance of fabric.Canvas
22 */
23export function createSVGRefElementsMarkup(canvas: StaticCanvas): string;
24/**
25 * Creates markup containing SVG font faces
26 * @param objects Array of fabric objects
27 */
28export function createSVGFontFacesMarkup(objects: Object[]): string;
29/**
30 * Takes string corresponding to an SVG document, and parses it into a set of fabric objects
31 * @param [reviver] Method for further parsing of SVG elements, called after each fabric object created.
32 */
33export function loadSVGFromString(string: string, callback: (results: Object[], options: any) => void, reviver?: Function): void;
34/**
35 * Takes url corresponding to an SVG document, and parses it into a set of fabric objects.
36 * Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy)
37 * @param [reviver] Method for further parsing of SVG elements, called after each fabric object created.
38 */
39export function loadSVGFromURL(url: string, callback: (results: Object[], options: any) => void, reviver?: Function): void;
40/**
41 * Returns CSS rules for a given SVG document
42 * @param doc SVG document to parse
43 */
44export function getCSSRules(doc: SVGElement): any;
45
46export function parseElements(elements: any[], callback: Function, options: any, reviver?: Function): void;
47/**
48 * Parses "points" attribute, returning an array of values
49 * @param points points attribute string
50 */
51export function parsePointsAttribute(points: string): any[];
52/**
53 * Parses "style" attribute, retuning an object with values
54 * @param element Element to parse
55 */
56export function parseStyleAttribute(element: SVGElement): any;
57/**
58 * Transforms an array of svg elements to corresponding fabric.* instances
59 * @param elements Array of elements to parse
60 * @param callback Being passed an array of fabric instances (transformed from SVG elements)
61 * @param [options] Options object
62 * @param [reviver] Method for further parsing of SVG elements, called after each fabric object created.
63 */
64export function parseElements(elements: SVGElement[], callback: Function, options?: any, reviver?: Function): void;
65/**
66 * Returns an object of attributes' name/value, given element and an array of attribute names;
67 * Parses parent "g" nodes recursively upwards.
68 * @param element Element to parse
69 * @param attributes Array of attributes to parse
70 */
71export function parseAttributes(element: HTMLElement, attributes: string[], svgUid?: string): { [key: string]: string };
72/**
73 * Parses an SVG document, returning all of the gradient declarations found in it
74 * @param doc SVG document to parse
75 */
76export function getGradientDefs(doc: SVGElement): { [key: string]: any };
77/**
78 * Parses a short font declaration, building adding its properties to a style object
79 * @param value font declaration
80 * @param oStyle definition
81 */
82export function parseFontDeclaration(value: string, oStyle: any): void;
83/**
84 * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback
85 * @param doc SVG document to parse
86 * @param callback Callback to call when parsing is finished; It's being passed an array of elements (parsed from a document).
87 * @param [reviver] Method for further parsing of SVG elements, called after each fabric object created.
88 */
89export function parseSVGDocument(doc: SVGElement, callback: (results: Object[], options: any) => void, reviver?: Function): void;
90/**
91 * Parses "transform" attribute, returning an array of values
92 * @param attributeValue String containing attribute value
93 */
94export function parseTransformAttribute(attributeValue: string): number[];
95
96// fabric Log
97// ---------------
98/**
99 * Wrapper around `console.log` (when available)
100 */
101export function log(...values: any[]): void;
102/**
103 * Wrapper around `console.warn` (when available)
104 */
105export function warn(...values: any[]): void;
106
107///////////////////////////////////////////////////////////////////////////////
108// Data Object Interfaces - These interface are not specific part of fabric,
109// They are just helpful for for defining function parameters
110//////////////////////////////////////////////////////////////////////////////
111interface IDataURLOptions {
112 /**
113 * The format of the output image. Either "jpeg" or "png"
114 */
115 format?: string;
116 /**
117 * Quality level (0..1). Only used for jpeg
118 */
119 quality?: number;
120 /**
121 * Multiplier to scale by
122 */
123 multiplier?: number;
124 /**
125 * Cropping left offset. Introduced in v1.2.14
126 */
127 left?: number;
128 /**
129 * Cropping top offset. Introduced in v1.2.14
130 */
131 top?: number;
132 /**
133 * Cropping width. Introduced in v1.2.14
134 */
135 width?: number;
136 /**
137 * Cropping height. Introduced in v1.2.14
138 */
139 height?: number;
140 enableRetinaScaling?: boolean;
141 withoutTransform?: boolean;
142 withoutShadow?: boolean;
143}
144
145interface IEvent {
146 e: Event;
147 target?: Object;
148 subTargets?: Object[],
149 button?: number;
150 isClick?: boolean;
151 pointer?: Point;
152 absolutePointer?: Point;
153 transform?: { corner: string, original: Object, originX: string, originY: string, width: number };
154}
155
156interface IFillOptions {
157 /**
158 * options.source Pattern source
159 */
160 source: string | HTMLImageElement;
161 /**
162 * Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat)
163 */
164 repeat?: string;
165 /**
166 * Pattern horizontal offset from object's left/top corner
167 */
168 offsetX?: number;
169 /**
170 * Pattern vertical offset from object's left/top corner
171 */
172 offsetY?: number;
173}
174
175interface IToSVGOptions {
176 /**
177 * If true xml tag is not included
178 */
179 suppressPreamble?: boolean;
180 /**
181 * SVG viewbox object
182 */
183 viewBox?: IViewBox;
184 /**
185 * Encoding of SVG output
186 */
187 encoding?: string;
188 /**
189 * desired width of svg with or without units
190 */
191 width?: number;
192 /**
193 * desired height of svg with or without units
194 */
195 height?: number;
196}
197
198interface IViewBox {
199 /**
200 * x-cooridnate of viewbox
201 */
202 x: number;
203 /**
204 * y-coordinate of viewbox
205 */
206 y: number;
207 /**
208 * Width of viewbox
209 */
210 width: number;
211 /**
212 * Height of viewbox
213 */
214 height: number;
215}
216
217///////////////////////////////////////////////////////////////////////////////
218// Mixins Interfaces
219//////////////////////////////////////////////////////////////////////////////
220interface ICollection<T> {
221 /**
222 * Adds objects to collection, then renders canvas (if `renderOnAddRemove` is not `false`)
223 * Objects should be instances of (or inherit from) fabric.Object
224 * @param object Zero or more fabric instances
225 */
226 add(...object: Object[]): T;
227
228 /**
229 * Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`)
230 * An object should be an instance of (or inherit from) fabric.Object
231 * @param object Object to insert
232 * @param index Index to insert object at
233 * @param nonSplicing When `true`, no splicing (shifting) of objects occurs
234 * @return thisArg
235 * @chainable
236 */
237 insertAt(object: Object, index: number, nonSplicing: boolean): T;
238
239 /**
240 * Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`)
241 * @param object Zero or more fabric instances
242 * @return thisArg
243 * @chainable
244 */
245 remove(...object: Object[]): T;
246
247 /**
248 * Executes given function for each object in this group
249 * @param context Context (aka thisObject)
250 * @return thisArg
251 */
252 forEachObject(callback: (element: Object, index: number, array: Object[]) => void, context?: any): T;
253
254 /**
255 * Returns an array of children objects of this instance
256 * Type parameter introduced in 1.3.10
257 * @param [type] When specified, only objects of this type are returned
258 */
259 getObjects(type?: string): Object[];
260
261 /**
262 * Returns object at specified index
263 * @return thisArg
264 */
265 item(index: number): T;
266
267 /**
268 * Returns true if collection contains no objects
269 * @return true if collection is empty
270 */
271 isEmpty(): boolean;
272
273 /**
274 * Returns a size of a collection (i.e: length of an array containing its objects)
275 * @return Collection size
276 */
277 size(): number;
278
279 /**
280 * Returns true if collection contains an object
281 * @param object Object to check against
282 * @return `true` if collection contains an object
283 */
284 contains(object: Object): boolean;
285
286 /**
287 * Returns number representation of a collection complexity
288 * @return complexity
289 */
290 complexity(): number;
291}
292
293interface IObservable<T> {
294 /**
295 * Observes specified event
296 * @param eventName Event name (eg. 'after:render')
297 * @param handler Function that receives a notification when an event of the specified type occurs
298 */
299 on(eventName: string, handler: (e: IEvent) => void): T;
300
301 /**
302 * Observes specified event
303 * @param eventName Object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
304 */
305 on(events: { [eventName: string]: (e: IEvent) => void }): T;
306 /**
307 * Fires event with an optional options object
308 * @param eventName Event name to fire
309 * @param [options] Options object
310 */
311 trigger(eventName: string, options?: any): T;
312 /**
313 * Stops event observing for a particular event handler. Calling this method
314 * without arguments removes all handlers for all events
315 * @param eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
316 * @param handler Function to be deleted from EventListeners
317 */
318 off(eventName?: string | any, handler?: (e: IEvent) => void): T;
319}
320
321interface Callbacks {
322 /** Invoked on completion */
323 onComplete?: Function;
324 /** Invoked on every step of animation */
325 onChange?: Function;
326}
327
328// animation mixin
329// ----------------------------------------------------
330interface ICanvasAnimation<T> {
331 FX_DURATION: number;
332 /**
333 * Centers object horizontally with animation.
334 * @param object Object to center
335 */
336 fxCenterObjectH(object: Object, callbacks?: Callbacks): T;
337
338 /**
339 * Centers object vertically with animation.
340 * @param object Object to center
341 */
342 fxCenterObjectV(object: Object, callbacks?: Callbacks): T;
343
344 /**
345 * Same as `fabric.Canvas#remove` but animated
346 * @param object Object to remove
347 * @chainable
348 */
349 fxRemove(object: Object): T;
350
351 /**
352 * Same as {@link fabric.Canvas.prototype.straightenObject}, but animated
353 * @param {fabric.Object} object Object to straighten
354 * @return {fabric.Canvas} thisArg
355 * @chainable
356 */
357 fxStraightenObject(object: Object): T;
358}
359interface IObjectAnimation<T> {
360 /**
361 * Animates object's properties
362 * object.animate('left', ..., {duration: ...});
363 * @param property Property to animate
364 * @param value Value to animate property
365 * @param options The animation options
366 */
367 animate(property: string, value: number | string, options?: IAnimationOptions): Object;
368 /**
369 * Animates object's properties
370 * object.animate({ left: ..., top: ... }, { duration: ... });
371 * @param properties Properties to animate
372 * @param value Options object
373 */
374 animate(properties: any, options?: IAnimationOptions): Object;
375}
376interface IAnimationOptions {
377 /**
378 * Allows to specify starting value of animatable property (if we don't want current value to be used).
379 */
380 from?: string | number;
381 /**
382 * Defaults to 500 (ms). Can be used to change duration of an animation.
383 */
384 duration?: number;
385 /**
386 * Callback; invoked on every value change
387 */
388 onChange?: Function;
389 /**
390 * Callback; invoked when value change is completed
391 */
392 onComplete?: Function;
393
394 /**
395 * Easing function. Default: fabric.util.ease.easeInSine
396 */
397 easing?: Function;
398 /**
399 * Value to modify the property by, default: end - start
400 */
401 by?: number;
402}
403
404///////////////////////////////////////////////////////////////////////////////
405// General Fabric Interfaces
406//////////////////////////////////////////////////////////////////////////////
407export class Color {
408 /**
409 * Color class
410 * The purpose of Color is to abstract and encapsulate common color operations;
411 * @param color optional in hex or rgb(a) format
412 */
413 constructor(color?: string);
414
415 /**
416 * Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1])
417 */
418 getSource(): number[];
419
420 /**
421 * Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1])
422 */
423 setSource(source: number[]): void;
424
425 /**
426 * Returns color represenation in RGB format ex: rgb(0-255,0-255,0-255)
427 */
428 toRgb(): string;
429
430 /**
431 * Returns color represenation in RGBA format ex: rgba(0-255,0-255,0-255,0-1)
432 */
433 toRgba(): string;
434
435 /**
436 * Returns color represenation in HSL format ex: hsl(0-360,0%-100%,0%-100%)
437 */
438 toHsl(): string;
439
440 /**
441 * Returns color represenation in HSLA format ex: hsla(0-360,0%-100%,0%-100%,0-1)
442 */
443 toHsla(): string;
444
445 /**
446 * Returns color represenation in HEX format ex: FF5555
447 */
448 toHex(): string;
449
450 /**
451 * Returns color representation in HEXA format
452 * @return {String} ex: FF5555CC
453 */
454 toHexa(): string;
455
456 /**
457 * Gets value of alpha channel for this color
458 */
459 getAlpha(): number;
460
461 /**
462 * Sets value of alpha channel for this color
463 * @param alpha Alpha value 0-1
464 */
465 setAlpha(alpha: number): void;
466
467 /**
468 * Transforms color to its grayscale representation
469 */
470 toGrayscale(): Color;
471
472 /**
473 * Transforms color to its black and white representation
474 */
475 toBlackWhite(threshold: number): Color;
476 /**
477 * Overlays color with another color
478 */
479 overlayWith(otherColor: string | Color): Color;
480
481 /**
482 * Returns new color object, when given a color in RGB format
483 * @param color Color value ex: rgb(0-255,0-255,0-255)
484 */
485 static fromRgb(color: string): Color;
486 /**
487 * Returns new color object, when given a color in RGBA format
488 * @param color Color value ex: rgb(0-255,0-255,0-255)
489 */
490 static fromRgba(color: string): Color;
491 /**
492 * Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format
493 * @param color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%)
494 */
495 static sourceFromRgb(color: string): number[];
496 /**
497 * Returns new color object, when given a color in HSL format
498 * @param color Color value ex: hsl(0-260,0%-100%,0%-100%)
499 */
500 static fromHsl(color: string): Color;
501 /**
502 * Returns new color object, when given a color in HSLA format
503 * @param color Color value ex: hsl(0-260,0%-100%,0%-100%)
504 */
505 static fromHsla(color: string): Color;
506 /**
507 * Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format.
508 * @param color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1)
509 */
510 static sourceFromHsl(color: string): number[];
511 /**
512 * Returns new color object, when given a color in HEX format
513 * @param color Color value ex: FF5555
514 */
515 static fromHex(color: string): Color;
516
517 /**
518 * Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in HEX format
519 * @param color ex: FF5555
520 */
521 static sourceFromHex(color: string): number[];
522 /**
523 * Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5])
524 */
525 static fromSource(source: number[]): Color;
526}
527
528interface IGradientOptions {
529 /**
530 * Horizontal offset for aligning gradients coming from SVG when outside pathgroups
531 * @type Number
532 */
533 offsetX?: number;
534 /**
535 * Vertical offset for aligning gradients coming from SVG when outside pathgroups
536 * @type Number
537 */
538 offsetY?: number;
539 type?: string;
540 coords?: {x1?: number, y1?: number, x2?: number, y2?: number, r1?: number, r2?: number};
541 /**
542 * Color stops object eg. {0:string; 1:string;
543 */
544 colorStops?: any;
545 gradientTransform?: any;
546}
547export interface Gradient extends IGradientOptions { }
548export class Gradient {
549 /**
550 * Adds another colorStop
551 * @param colorStop Object with offset and color
552 */
553 addColorStop(colorStop: any): Gradient;
554 /**
555 * Returns object representation of a gradient
556 */
557 toObject(propertiesToInclude?: any): any;
558 /**
559 * Returns SVG representation of an gradient
560 * @param {Object} object Object to create a gradient for
561 * @return {String} SVG representation of an gradient (linear/radial)
562 */
563 toSVG(object: any): string;
564 /**
565 * Returns an instance of CanvasGradient
566 * @param ctx Context to render on
567 */
568 toLive(ctx: CanvasRenderingContext2D): CanvasGradient;
569 /**
570 * Returns {@link fabric.Gradient} instance from an SVG element
571 * @static
572 * @memberOf fabric.Gradient
573 * @param {SVGGradientElement} el SVG gradient element
574 * @param {fabric.Object} instance
575 * @return {fabric.Gradient} Gradient instance
576 * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement
577 * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement
578 */
579 static fromElement(el: SVGGradientElement, instance: Object): Gradient;
580 /**
581 * Returns {@link fabric.Gradient} instance from its object representation
582 * @static
583 * @memberOf fabric.Gradient
584 * @param {Object} obj
585 * @param {Object} [options] Options object
586 */
587 static forObject(obj: any, options?: IGradientOptions): Gradient;
588}
589export class Intersection {
590 constructor(status?: string);
591 /**
592 * Appends a point to intersection
593 */
594 appendPoint(point: Point): Intersection;
595 /**
596 * Appends points to intersection
597 */
598 appendPoints(points: Point[]): Intersection;
599 /**
600 * Checks if one line intersects another
601 */
602 static intersectLineLine(a1: Point, a2: Point, b1: Point, b2: Point): Intersection;
603 /**
604 * Checks if line intersects polygon
605 */
606 static intersectLinePolygon(a1: Point, a2: Point, points: Point[]): Intersection;
607 /**
608 * Checks if polygon intersects another polygon
609 */
610 static intersectPolygonPolygon(points1: Point[], points2: Point[]): Intersection;
611 /**
612 * Checks if polygon intersects rectangle
613 */
614 static intersectPolygonRectangle(points: Point[], r1: number, r2: number): Intersection;
615}
616
617interface IPatternOptions {
618 /**
619 * Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat)
620 */
621 repeat?: string;
622
623 /**
624 * Pattern horizontal offset from object's left/top corner
625 */
626 offsetX?: number;
627
628 /**
629 * Pattern vertical offset from object's left/top corner
630 */
631 offsetY?: number;
632 /**
633 * crossOrigin value (one of "", "anonymous", "use-credentials")
634 * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes
635 * @type String
636 */
637 crossOrigin?: '' | 'anonymous' | 'use-credentials';
638 /**
639 * Transform matrix to change the pattern, imported from svgs
640 */
641 patternTransform?: number[];
642 /**
643 * The source for the pattern
644 */
645 source: string | HTMLImageElement;
646}
647export interface Pattern extends IPatternOptions { }
648export class Pattern {
649 /**
650 * Unique identifier
651 */
652 id: number;
653
654 constructor(options?: IPatternOptions);
655 /**
656 * Returns object representation of a pattern
657 * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
658 * @return {Object} Object representation of a pattern instance
659 */
660 toObject(propertiesToInclude: any): any;
661 /**
662 * Returns SVG representation of a pattern
663 * @param {fabric.Object} object
664 * @return {String} SVG representation of a pattern
665 */
666 toSVG(object: Object): string;
667 setOptions(options: IPatternOptions): void;
668 /**
669 * Returns an instance of CanvasPattern
670 * @param {CanvasRenderingContext2D} ctx Context to create pattern
671 * @return {CanvasPattern}
672 */
673 toLive(ctx: CanvasRenderingContext2D): CanvasPattern;
674}
675export class Point {
676 x: number;
677 y: number;
678 type: string;
679 constructor(x: number, y: number);
680 /**
681 * Adds another point to this one and returns another one
682 * @param {fabric.Point} that
683 * @return {fabric.Point} new Point instance with added values
684 */
685 add(that: Point): Point;
686 /**
687 * Adds another point to this one
688 * @param {fabric.Point} that
689 * @return {fabric.Point} thisArg
690 * @chainable
691 */
692 addEquals(that: Point): Point;
693 /**
694 * Adds value to this point and returns a new one
695 * @param {Number} scalar
696 * @return {fabric.Point} new Point with added value
697 */
698 scalarAdd(scalar: number): Point;
699 /**
700 * Adds value to this point
701 * @param {Number} scalar
702 * @return {fabric.Point} thisArg
703 * @chainable
704 */
705 scalarAddEquals(scalar: number): Point;
706 /**
707 * Subtracts another point from this point and returns a new one
708 * @param {fabric.Point} that
709 * @return {fabric.Point} new Point object with subtracted values
710 */
711 subtract(that: Point): Point;
712 /**
713 * Subtracts another point from this point
714 * @param {fabric.Point} that
715 * @return {fabric.Point} thisArg
716 * @chainable
717 */
718 subtractEquals(that: Point): Point;
719 /**
720 * Subtracts value from this point and returns a new one
721 * @param {Number} scalar
722 * @return {fabric.Point}
723 */
724 scalarSubtract(scalar: number): Point;
725 /**
726 * Subtracts value from this point
727 * @param {Number} scalar
728 * @return {fabric.Point} thisArg
729 * @chainable
730 */
731 scalarSubtractEquals(scalar: number): Point;
732 /**
733 * Multiplies this point by a value and returns a new one
734 * @param {Number} scalar
735 * @return {fabric.Point}
736 */
737 multiply(scalar: number): Point;
738 /**
739 * Multiplies this point by a value
740 * @param {Number} scalar
741 * @return {fabric.Point} thisArg
742 * @chainable
743 */
744 multiplyEquals(scalar: number): Point;
745 /**
746 * Divides this point by a value and returns a new one
747 * @param {Number} scalar
748 * @return {fabric.Point}
749 */
750 divide(scalar: number): Point;
751 /**
752 * Divides this point by a value
753 * @param {Number} scalar
754 * @return {fabric.Point} thisArg
755 * @chainable
756 */
757 divideEquals(scalar: number): Point;
758 /**
759 * Returns true if this point is equal to another one
760 * @param {fabric.Point} that
761 * @return {Boolean}
762 */
763 eq(that: Point): Point;
764 /**
765 * Returns true if this point is less than another one
766 * @param {fabric.Point} that
767 * @return {Boolean}
768 */
769 lt(that: Point): Point;
770 /**
771 * Returns true if this point is less than or equal to another one
772 * @param {fabric.Point} that
773 * @return {Boolean}
774 */
775 lte(that: Point): Point;
776 /**
777 * Returns true if this point is greater another one
778 * @param {fabric.Point} that
779 * @return {Boolean}
780 */
781 gt(that: Point): Point;
782 /**
783 * Returns true if this point is greater than or equal to another one
784 * @param {fabric.Point} that
785 * @return {Boolean}
786 */
787 gte(that: Point): Point;
788 /**
789 * Returns new point which is the result of linear interpolation with this one and another one
790 * @param {fabric.Point} that
791 * @param {Number} t , position of interpolation, between 0 and 1 default 0.5
792 * @return {fabric.Point}
793 */
794 lerp(that: Point, t: number): Point;
795 /**
796 * Returns distance from this point and another one
797 * @param {fabric.Point} that
798 * @return {Number}
799 */
800 distanceFrom(that: Point): number;
801 /**
802 * Returns the point between this point and another one
803 * @param {fabric.Point} that
804 * @return {fabric.Point}
805 */
806 midPointFrom(that: Point): Point;
807 /**
808 * Returns a new point which is the min of this and another one
809 * @param {fabric.Point} that
810 * @return {fabric.Point}
811 */
812 min(that: Point): Point;
813 /**
814 * Returns a new point which is the max of this and another one
815 * @param {fabric.Point} that
816 * @return {fabric.Point}
817 */
818 max(that: Point): Point;
819 /**
820 * Returns string representation of this point
821 * @return {String}
822 */
823 toString(): string;
824 /**
825 * Sets x/y of this point
826 * @param {Number} x
827 * @param {Number} y
828 * @chainable
829 */
830 setXY(x: number, y: number): Point;
831 /**
832 * Sets x of this point
833 * @param {Number} x
834 * @chainable
835 */
836 setX(x: number): Point;
837 /**
838 * Sets y of this point
839 * @param {Number} y
840 * @chainable
841 */
842 setY(y: number): Point;
843 /**
844 * Sets x/y of this point from another point
845 * @param {fabric.Point} that
846 * @chainable
847 */
848 setFromPoint(that: Point): Point;
849 /**
850 * Swaps x/y of this point and another point
851 * @param {fabric.Point} that
852 */
853 swap(that: Point): Point;
854 /**
855 * return a cloned instance of the point
856 * @return {fabric.Point}
857 */
858 clone(): Point;
859}
860interface IShadowOptions {
861 /**
862 * Shadow color
863 */
864 color?: string;
865 /**
866 * Shadow blur
867 */
868 blur?: number;
869 /**
870 * Shadow horizontal offset
871 */
872 offsetX?: number;
873 /**
874 * Shadow vertical offset
875 */
876 offsetY?: number;
877 /**
878 * Whether the shadow should affect stroke operations
879 */
880 affectStroke?: boolean;
881 /**
882 * Indicates whether toObject should include default values
883 */
884 includeDefaultValues?: boolean;
885 /**
886 * When `false`, the shadow will scale with the object.
887 * When `true`, the shadow's offsetX, offsetY, and blur will not be affected by the object's scale.
888 * default to false
889 * @type Boolean
890 * @default
891 */
892 nonScaling?: boolean;
893}
894export interface Shadow extends IShadowOptions { }
895export class Shadow {
896 constructor(options?: IShadowOptions| string);
897 initialize(options?: IShadowOptions | string): Shadow;
898 /**
899 * Returns a string representation of an instance
900 * @see http://www.w3.org/TR/css-text-decor-3/#text-shadow
901 * @return {String} Returns CSS3 text-shadow declaration
902 */
903 toString(): string;
904 /**
905 * Returns SVG representation of a shadow
906 * @param {fabric.Object} object
907 * @return {String} SVG representation of a shadow
908 */
909 toSVG(object: Object): string;
910 /**
911 * Returns object representation of a shadow
912 * @return {Object} Object representation of a shadow instance
913 */
914 toObject(): any;
915 /**
916 * Regex matching shadow offsetX, offsetY and blur (ex: "2px 2px 10px rgba(0,0,0,0.2)", "rgb(0,255,0) 2px 2px")
917 * @static
918 * @field
919 * @memberOf fabric.Shadow
920 */
921 static reOffsetsAndBlur: RegExp;
922}
923
924///////////////////////////////////////////////////////////////////////////////
925// Canvas Interfaces
926//////////////////////////////////////////////////////////////////////////////
927interface ICanvasDimensions {
928 /**
929 * Width of canvas element
930 */
931 width: number | string;
932 /**
933 * Height of canvas element
934 */
935 height: number | string;
936}
937interface ICanvasDimensionsOptions {
938 /**
939 * Set the given dimensions only as canvas backstore dimensions
940 */
941 backstoreOnly?: boolean;
942 /**
943 * Set the given dimensions only as css dimensions
944 */
945 cssOnly?: boolean;
946}
947
948interface IStaticCanvasOptions {
949 /**
950 * Background color of canvas instance.
951 * Should be set via {@link fabric.StaticCanvas#setBackgroundColor}.
952 * @type {(String|fabric.Pattern)}
953 */
954 backgroundColor?: string | Pattern;
955 /**
956 * Background image of canvas instance.
957 * Should be set via {@link fabric.StaticCanvas#setBackgroundImage}.
958 * <b>Backwards incompatibility note:</b> The "backgroundImageOpacity"
959 * and "backgroundImageStretch" properties are deprecated since 1.3.9.
960 * Use {@link fabric.Image#opacity}, {@link fabric.Image#width} and {@link fabric.Image#height}.
961 * since 2.4.0 image caching is active, please when putting an image as background, add to the
962 * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom
963 * vale. As an alternative you can disable image objectCaching
964 * @type fabric.Image
965 */
966 backgroundImage?: Image | string;
967 /**
968 * Overlay color of canvas instance.
969 * Should be set via {@link fabric.StaticCanvas#setOverlayColor}
970 * @since 1.3.9
971 * @type {(String|fabric.Pattern)}
972 */
973 overlayColor?: string | Pattern;
974 /**
975 * Overlay image of canvas instance.
976 * Should be set via {@link fabric.StaticCanvas#setOverlayImage}.
977 * <b>Backwards incompatibility note:</b> The "overlayImageLeft"
978 * and "overlayImageTop" properties are deprecated since 1.3.9.
979 * Use {@link fabric.Image#left} and {@link fabric.Image#top}.
980 * since 2.4.0 image caching is active, please when putting an image as overlay, add to the
981 * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom
982 * vale. As an alternative you can disable image objectCaching
983 * @type fabric.Image
984 */
985 overlayImage?: Image;
986 /**
987 * Indicates whether toObject/toDatalessObject should include default values
988 * if set to false, takes precedence over the object value.
989 * @type Boolean
990 */
991 includeDefaultValues?: boolean;
992 /**
993 * Indicates whether objects' state should be saved
994 * @type Boolean
995 */
996 stateful?: boolean;
997 /**
998 * Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove},
999 * {@link fabric.StaticCanvas.moveTo}, {@link fabric.StaticCanvas.clear} and many more, should also re-render canvas.
1000 * Disabling this option will not give a performance boost when adding/removing a lot of objects to/from canvas at once
1001 * since the renders are quequed and executed one per frame.
1002 * Disabling is suggested anyway and managing the renders of the app manually is not a big effort ( canvas.requestRenderAll() )
1003 * Left default to true to do not break documentation and old app, fiddles.
1004 * @type Boolean
1005 */
1006 renderOnAddRemove?: boolean;
1007 /**
1008 * Function that determines clipping of entire canvas area
1009 * Being passed context as first argument.
1010 * If you are using code minification, ctx argument can be minified/manglied you should use
1011 * as a workaround `var ctx = arguments[0];` in the function;
1012 * See clipping canvas area in {@link https://github.com/kangax/fabric.js/wiki/FAQ}
1013 * @deprecated since 2.0.0
1014 * @type Function
1015 */
1016 clipTo?(context: CanvasRenderingContext2D): void;
1017 /**
1018 * Indicates whether object controls (borders/controls) are rendered above overlay image
1019 * @type Boolean
1020 */
1021 controlsAboveOverlay?: boolean;
1022 /**
1023 * Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas
1024 * @type Boolean
1025 */
1026 allowTouchScrolling?: boolean;
1027 /**
1028 * Indicates whether this canvas will use image smoothing, this is on by default in browsers
1029 */
1030 imageSmoothingEnabled?: boolean;
1031 /**
1032 * The transformation (in the format of Canvas transform) which focuses the viewport
1033 */
1034 viewportTransform?: number[];
1035 /**
1036 * if set to false background image is not affected by viewport transform
1037 * @since 1.6.3
1038 * @type Boolean
1039 */
1040 backgroundVpt?: boolean;
1041 /**
1042 * if set to false overlay image is not affected by viewport transform
1043 * @since 1.6.3
1044 * @type Boolean
1045 */
1046 overlayVpt?: boolean;
1047 /**
1048 * When true, canvas is scaled by devicePixelRatio for better rendering on retina screens
1049 * @type Boolean
1050 */
1051 enableRetinaScaling?: boolean;
1052 /**
1053 * Describe canvas element extension over design
1054 * properties are tl,tr,bl,br.
1055 * if canvas is not zoomed/panned those points are the four corner of canvas
1056 * if canvas is viewportTransformed you those points indicate the extension
1057 * of canvas element in plain untrasformed coordinates
1058 * The coordinates get updated with @method calcViewportBoundaries.
1059 * @memberOf fabric.StaticCanvas.prototype
1060 */
1061 vptCoords?: {tl: {x: number, y: number}, tr: {x: number, y: number}, bl: {x: number, y: number}, br: {x: number, y: number}}
1062 /**
1063 * Based on vptCoords and object.aCoords, skip rendering of objects that
1064 * are not included in current viewport.
1065 * May greatly help in applications with crowded canvas and use of zoom/pan
1066 * If One of the corner of the bounding box of the object is on the canvas
1067 * the objects get rendered.
1068 * @memberOf fabric.StaticCanvas.prototype
1069 * @type Boolean
1070 */
1071 skipOffscreen?: boolean;
1072 /**
1073 * a fabricObject that, without stroke define a clipping area with their shape. filled in black
1074 * the clipPath object gets used when the canvas has rendered, and the context is placed in the
1075 * top left corner of the canvas.
1076 * clipPath will clip away controls, if you do not want this to happen use controlsAboveOverlay = true
1077 * @type fabric.Object
1078 */
1079 clipPath?: Object;
1080 /**
1081 * When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true,
1082 * a zoomed canvas will then produce zoomed SVG output.
1083 * @type Boolean
1084 */
1085 svgViewportTransformation?: boolean;
1086}
1087
1088export interface FreeDrawingBrush {
1089 /**
1090 * Can be any regular color value.
1091 */
1092 color: string;
1093
1094 /**
1095 * Brush width measured in pixels.
1096 */
1097 width: number;
1098}
1099
1100export interface StaticCanvas extends IObservable<StaticCanvas>, IStaticCanvasOptions, ICollection<StaticCanvas>, ICanvasAnimation<StaticCanvas> { }
1101export class StaticCanvas {
1102 /**
1103 * Constructor
1104 * @param {HTMLElement | String} el <canvas> element to initialize instance on
1105 * @param {Object} [options] Options object
1106 * @return {Object} thisArg
1107 */
1108 constructor(element: HTMLCanvasElement | string, options?: ICanvasOptions);
1109
1110 _activeObject?: Object | Group;
1111
1112 freeDrawingBrush: FreeDrawingBrush;
1113
1114 /**
1115 * Calculates canvas element offset relative to the document
1116 * This method is also attached as "resize" event handler of window
1117 * @return {fabric.Canvas} instance
1118 * @chainable
1119 */
1120 calcOffset(): Canvas;
1121
1122 /**
1123 * Sets {@link fabric.StaticCanvas#overlayImage|overlay image} for this canvas
1124 * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set overlay to
1125 * @param {Function} callback callback to invoke when image is loaded and set as an overlay
1126 * @param {Object} [options] Optional options to set for the {@link fabric.Image|overlay image}.
1127 * @return {fabric.Canvas} thisArg
1128 * @chainable
1129 */
1130 setOverlayImage(image: Image | string, callback: Function, options?: IImageOptions): Canvas;
1131
1132 /**
1133 * Sets {@link fabric.StaticCanvas#backgroundImage|background image} for this canvas
1134 * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set background to
1135 * @param {Function} callback Callback to invoke when image is loaded and set as background
1136 * @param {Object} [options] Optional options to set for the {@link fabric.Image|background image}.
1137 * @return {fabric.Canvas} thisArg
1138 * @chainable
1139 */
1140 setBackgroundImage(image: Image | string, callback: Function, options?: IImageOptions): Canvas;
1141
1142 /**
1143 * Sets {@link fabric.StaticCanvas#overlayColor|foreground color} for this canvas
1144 * @param {(String|fabric.Pattern)} overlayColor Color or pattern to set foreground color to
1145 * @param {Function} callback Callback to invoke when foreground color is set
1146 * @return {fabric.Canvas} thisArg
1147 * @chainable
1148 */
1149 setOverlayColor(overlayColor: string | Pattern, callback: Function): Canvas;
1150
1151 /**
1152 * Sets {@link fabric.StaticCanvas#backgroundColor|background color} for this canvas
1153 * @param {(String|fabric.Pattern)} backgroundColor Color or pattern to set background color to
1154 * @param {Function} callback Callback to invoke when background color is set
1155 * @return {fabric.Canvas} thisArg
1156 * @chainable
1157 */
1158 setBackgroundColor(backgroundColor: string | Pattern, callback: Function): Canvas;
1159
1160 /**
1161 * Returns canvas width (in px)
1162 * @return {Number}
1163 */
1164 getWidth(): number;
1165
1166 /**
1167 * Returns canvas height (in px)
1168 * @return {Number}
1169 */
1170 getHeight(): number;
1171
1172 /**
1173 * Sets width of this canvas instance
1174 * @param {Number|String} value Value to set width to
1175 * @param {Object} [options] Options object
1176 * @return {fabric.Canvas} instance
1177 * @chainable true
1178 */
1179 setWidth(value: number | string, options?: ICanvasDimensionsOptions): Canvas;
1180
1181 /**
1182 * Sets height of this canvas instance
1183 * @param value Value to set height to
1184 * @param [options] Options object
1185 * @return {fabric.Canvas} instance
1186 * @chainable true
1187 */
1188 setHeight(value: number | string, options?: ICanvasDimensionsOptions): Canvas;
1189
1190 /**
1191 * Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em)
1192 * @param dimensions Object with width/height properties
1193 * @param [options] Options object
1194 * @return {fabric.Canvas} thisArg
1195 * @chainable
1196 */
1197 setDimensions(dimensions: ICanvasDimensions, options?: ICanvasDimensionsOptions): Canvas;
1198
1199 /**
1200 * Returns canvas zoom level
1201 */
1202 getZoom(): number;
1203
1204 /**
1205 * Sets viewport transform of this canvas instance
1206 * @param {Array} vpt the transform in the form of context.transform
1207 * @return {fabric.Canvas} instance
1208 * @chainable
1209 */
1210 setViewportTransform(vpt: number[]): Canvas;
1211
1212 /**
1213 * Sets zoom level of this canvas instance, zoom centered around point
1214 * @param {fabric.Point} point to zoom with respect to
1215 * @param {Number} value to set zoom to, less than 1 zooms out
1216 * @return {fabric.Canvas} instance
1217 * @chainable true
1218 */
1219 zoomToPoint(point: Point, value: number): Canvas;
1220
1221 /**
1222 * Sets zoom level of this canvas instance
1223 * @param {Number} value to set zoom to, less than 1 zooms out
1224 * @return {fabric.Canvas} instance
1225 * @chainable
1226 */
1227 setZoom(value: number): Canvas;
1228
1229 /**
1230 * Pan viewport so as to place point at top left corner of canvas
1231 * @param {fabric.Point} point to move to
1232 * @return {fabric.Canvas} instance
1233 * @chainable
1234 */
1235 absolutePan(point: Point): Canvas;
1236
1237 /**
1238 * Pans viewpoint relatively
1239 * @param {fabric.Point} point (position vector) to move by
1240 * @return {fabric.Canvas} instance
1241 * @chainable
1242 */
1243 relativePan(point: Point): Canvas;
1244
1245 /**
1246 * Returns <canvas> element corresponding to this instance
1247 * @return {HTMLCanvasElement}
1248 */
1249 getElement(): HTMLCanvasElement;
1250
1251 /**
1252 * Clears specified context of canvas element
1253 * @param ctx Context to clear
1254 * @chainable
1255 */
1256 clearContext(ctx: CanvasRenderingContext2D): Canvas;
1257
1258 /**
1259 * Returns context of canvas where objects are drawn
1260 * @return {CanvasRenderingContext2D}
1261 */
1262 getContext(): CanvasRenderingContext2D;
1263
1264 /**
1265 * Clears all contexts (background, main, top) of an instance
1266 * @return {fabric.Canvas} thisArg
1267 * @chainable
1268 */
1269 clear(): Canvas;
1270
1271 /**
1272 * Renders the canvas
1273 * @return {fabric.Canvas} instance
1274 * @chainable
1275 */
1276 renderAll(): Canvas;
1277
1278 /**
1279 * Function created to be instance bound at initialization
1280 * used in requestAnimationFrame rendering
1281 * Let the fabricJS call it. If you call it manually you could have more
1282 * animationFrame stacking on to of each other
1283 * for an imperative rendering, use canvas.renderAll
1284 * @private
1285 * @return {fabric.Canvas} instance
1286 * @chainable
1287 */
1288 renderAndReset(): Canvas;
1289
1290 /**
1291 * Append a renderAll request to next animation frame.
1292 * unless one is already in progress, in that case nothing is done
1293 * a boolean flag will avoid appending more.
1294 * @return {fabric.Canvas} instance
1295 * @chainable
1296 */
1297 requestRenderAll(): Canvas;
1298
1299 /**
1300 * Calculate the position of the 4 corner of canvas with current viewportTransform.
1301 * helps to determinate when an object is in the current rendering viewport using
1302 * object absolute coordinates ( aCoords )
1303 * @return {Object} points.tl
1304 * @chainable
1305 */
1306 calcViewportBoundaries(): {tl: Point, br: Point, tr: Point, bl: Point};
1307
1308 /**
1309 * Renders background, objects, overlay and controls.
1310 * @param {CanvasRenderingContext2D} ctx
1311 * @param {Array} objects to render
1312 * @return {fabric.Canvas} instance
1313 * @chainable
1314 */
1315 renderCanvas(ctx: CanvasRenderingContext2D, objects: Object[] ): Canvas;
1316
1317 /**
1318 * Paint the cached clipPath on the lowerCanvasEl
1319 * @param {CanvasRenderingContext2D} ctx Context to render on
1320 */
1321 drawClipPathOnCanvas(ctx: CanvasRenderingContext2D): void;
1322
1323 /**
1324 * Returns coordinates of a center of canvas.
1325 * Returned value is an object with top and left properties
1326 * @return {Object} object with "top" and "left" number values
1327 */
1328 getCenter(): { top: number; left: number; };
1329
1330 /**
1331 * Centers object horizontally in the canvas
1332 * @param {fabric.Object} object Object to center horizontally
1333 * @return {fabric.Canvas} thisArg
1334 */
1335 centerObjectH(object: Object): Canvas;
1336
1337 /**
1338 * Centers object vertically in the canvas
1339 * @param {fabric.Object} object Object to center vertically
1340 * @return {fabric.Canvas} thisArg
1341 * @chainable
1342 */
1343 centerObjectV(object: Object): Canvas;
1344
1345 /**
1346 * Centers object vertically and horizontally in the canvas
1347 * @param {fabric.Object} object Object to center vertically and horizontally
1348 * @return {fabric.Canvas} thisArg
1349 * @chainable
1350 */
1351 centerObject(object: Object): Canvas;
1352
1353 /**
1354 * Centers object vertically and horizontally in the viewport
1355 * @param {fabric.Object} object Object to center vertically and horizontally
1356 * @return {fabric.Canvas} thisArg
1357 * @chainable
1358 */
1359 viewportCenterObject(object: Object): Canvas;
1360
1361 /**
1362 * Centers object horizontally in the viewport, object.top is unchanged
1363 * @param {fabric.Object} object Object to center vertically and horizontally
1364 * @return {fabric.Canvas} thisArg
1365 * @chainable
1366 */
1367 viewportCenterObjectH(object: Object): Canvas;
1368
1369 /**
1370 * Centers object Vertically in the viewport, object.top is unchanged
1371 * @param {fabric.Object} object Object to center vertically and horizontally
1372 * @return {fabric.Canvas} thisArg
1373 * @chainable
1374 */
1375 viewportCenterObjectV(object: Object): Canvas;
1376
1377 /**
1378 * Calculate the point in canvas that correspond to the center of actual viewport.
1379 * @return {fabric.Point} vpCenter, viewport center
1380 */
1381 getVpCenter(): Point;
1382
1383 /**
1384 * Returs dataless JSON representation of canvas
1385 * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
1386 * @return {String} json string
1387 */
1388 toDatalessJSON(propertiesToInclude?: string[]): string;
1389
1390 /**
1391 * Returns JSON representation of canvas
1392 * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
1393 * @return {String} JSON string
1394 */
1395 toJSON(propertiesToInclude?: string[]): string;
1396
1397 /**
1398 * Returns object representation of canvas
1399 * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
1400 * @return {Object} object representation of an instance
1401 */
1402 toObject(propertiesToInclude?: string[]): any;
1403
1404 /**
1405 * Returns dataless object representation of canvas
1406 * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
1407 * @return {Object} object representation of an instance
1408 */
1409 toDatalessObject(propertiesToInclude?: string[]): any;
1410
1411 /**
1412 * Returns SVG representation of canvas
1413 * @param [options] Options object for SVG output
1414 * @param [reviver] Method for further parsing of svg elements, called after each fabric object converted into svg representation.
1415 * @return {String} SVG string
1416 */
1417 toSVG(options?: IToSVGOptions, reviver?: Function): string;
1418
1419 /**
1420 * Moves an object or the objects of a multiple selection
1421 * to the bottom of the stack of drawn objects
1422 * @param {fabric.Object} object Object to send to back
1423 * @return {fabric.Canvas} thisArg
1424 * @chainable
1425 */
1426 sendToBack(object: Object): Canvas;
1427
1428 /**
1429 * Moves an object or the objects of a multiple selection
1430 * to the top of the stack of drawn objects
1431 * @param {fabric.Object} object Object to send
1432 * @return {fabric.Canvas} thisArg
1433 * @chainable
1434 */
1435 bringToFront(object: Object): Canvas;
1436
1437 /**
1438 * Moves an object or a selection down in stack of drawn objects
1439 * An optional paramter, intersecting allowes to move the object in behind
1440 * the first intersecting object. Where intersection is calculated with
1441 * bounding box. If no intersection is found, there will not be change in the
1442 * stack.
1443 * @param {fabric.Object} object Object to send
1444 * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object
1445 * @return {fabric.Canvas} thisArg
1446 * @chainable
1447 */
1448 sendBackwards(object: Object, intersecting?: boolean): Canvas;
1449
1450 /**
1451 * Moves an object or a selection up in stack of drawn objects
1452 * An optional paramter, intersecting allowes to move the object in front
1453 * of the first intersecting object. Where intersection is calculated with
1454 * bounding box. If no intersection is found, there will not be change in the
1455 * stack.
1456 * @param {fabric.Object} object Object to send
1457 * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object
1458 * @return {fabric.Canvas} thisArg
1459 * @chainable
1460 */
1461 bringForward(object: Object, intersecting?: boolean): Canvas;
1462
1463 /**
1464 * Moves an object to specified level in stack of drawn objects
1465 * @param {fabric.Object} object Object to send
1466 * @param {Number} index Position to move to
1467 * @return {fabric.Canvas} thisArg
1468 * @chainable
1469 */
1470 moveTo(object: Object, index: number): Canvas;
1471
1472 /**
1473 * Clears a canvas element and dispose objects
1474 * @return {fabric.Canvas} thisArg
1475 * @chainable */
1476 dispose(): Canvas;
1477
1478 /**
1479 * Returns a string representation of an instance
1480 * @return {String} string representation of an instance
1481 */
1482 toString(): string;
1483
1484 /**
1485 * @static
1486 * @type String
1487 * @default
1488 */
1489 static EMPTY_JSON: string;
1490
1491 /**
1492 * Provides a way to check support of some of the canvas methods
1493 * (either those of HTMLCanvasElement itself, or rendering context)
1494 *
1495 * @param {String} methodName Method to check support for;
1496 * Could be one of "setLineDash"
1497 * @return {Boolean | null} `true` if method is supported (or at least exists),
1498 * `null` if canvas element or context can not be initialized
1499 */
1500 static supports(methodName: "getImageData" | "toDataURL" | "toDataURLWithQuality" | "setLineDash"): boolean;
1501
1502 /**
1503 * Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately
1504 * @param [options] Options object
1505 */
1506 toDataURL(options?: IDataURLOptions): string;
1507
1508 /**
1509 * Returns JSON representation of canvas
1510 * @param [propertiesToInclude] Any properties that you might want to additionally include in the output
1511 */
1512 static toJSON(propertiesToInclude?: string[]): string;
1513
1514 /**
1515 * Clones canvas instance
1516 * @param [callback] Receives cloned instance as a first argument
1517 * @param [properties] Array of properties to include in the cloned canvas and children
1518 */
1519 clone(callback?: any, properties?: string[]): void;
1520
1521 /**
1522 * Clones canvas instance without cloning existing data.
1523 * This essentially copies canvas dimensions, clipping properties, etc.
1524 * but leaves data empty (so that you can populate it with your own)
1525 * @param [callback] Receives cloned instance as a first argument
1526 */
1527 cloneWithoutData(callback?: any): void;
1528
1529 /**
1530 * Populates canvas with data from the specified dataless JSON.
1531 * JSON format must conform to the one of {@link fabric.Canvas#toDatalessJSON}
1532 * @deprecated since 1.2.2
1533 * @param {String|Object} json JSON string or object
1534 * @param {Function} callback Callback, invoked when json is parsed
1535 * and corresponding objects (e.g: {@link fabric.Image})
1536 * are initialized
1537 * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created.
1538 * @return {fabric.Canvas} instance
1539 * @chainable
1540 * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#deserialization}
1541 */
1542 loadFromDatalessJSON(json: any, callback: Function, reviver?: Function): Canvas;
1543 /**
1544 * Populates canvas with data from the specified JSON.
1545 * JSON format must conform to the one of {@link fabric.Canvas#toJSON}
1546 * @param {String|Object} json JSON string or object
1547 * @param {Function} callback Callback, invoked when json is parsed
1548 * and corresponding objects (e.g: {@link fabric.Image})
1549 * are initialized
1550 * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created.
1551 * @return {fabric.Canvas} instance
1552 */
1553 loadFromJSON(json: any, callback: Function, reviver?: Function): Canvas;
1554 /**
1555 * Creates markup containing SVG font faces,
1556 * font URLs for font faces must be collected by developers
1557 * and are not extracted from the DOM by fabricjs
1558 * @param {Array} objects Array of fabric objects
1559 * @return {String}
1560 */
1561 createSVGFontFacesMarkup(objects: any[]): string;
1562 /**
1563 * Creates markup containing SVG referenced elements like patterns, gradients etc.
1564 * @return {String}
1565 */
1566 createSVGRefElementsMarkup(): string;
1567 /**
1568 * Straightens object, then rerenders canvas
1569 * @param {fabric.Object} object Object to straighten
1570 * @return {fabric.Canvas} thisArg
1571 * @chainable
1572 */
1573 straightenObject(object: Object): Canvas;
1574}
1575
1576interface ICanvasOptions extends IStaticCanvasOptions {
1577 /**
1578 * When true, objects can be transformed by one side (unproportionally)
1579 * @type Boolean
1580 */
1581 uniScaleTransform?: boolean;
1582
1583 /**
1584 * Indicates which key enable unproportional scaling
1585 * values: 'altKey', 'shiftKey', 'ctrlKey'.
1586 * If `null` or 'none' or any other string that is not a modifier key
1587 * feature is disabled feature disabled.
1588 * @since 1.6.2
1589 * @type String
1590 */
1591 uniScaleKey?: string;
1592
1593 /**
1594 * When true, objects use center point as the origin of scale transformation.
1595 * <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
1596 */
1597 centeredScaling?: boolean;
1598
1599 /**
1600 * When true, objects use center point as the origin of rotate transformation.
1601 * <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
1602 */
1603 centeredRotation?: boolean;
1604
1605 /**
1606 * Color of object's fill
1607 */
1608 fill?: string | Pattern;
1609
1610 /**
1611 * Indicates which key enable centered Transform
1612 * values: 'altKey', 'shiftKey', 'ctrlKey'.
1613 * If `null` or 'none' or any other string that is not a modifier key
1614 * feature is disabled feature disabled.
1615 * @since 1.6.2
1616 * @type String
1617 * @default
1618 */
1619 centeredKey?: string;
1620
1621 /**
1622 * Indicates which key enable alternate action on corner
1623 * values: 'altKey', 'shiftKey', 'ctrlKey'.
1624 * If `null` or 'none' or any other string that is not a modifier key
1625 * feature is disabled feature disabled.
1626 * @since 1.6.2
1627 * @type String
1628 * @default
1629 */
1630 altActionKey?: string;
1631
1632 /**
1633 * Indicates that canvas is interactive. This property should not be changed.
1634 */
1635 interactive?: boolean;
1636
1637 /**
1638 * Indicates whether group selection should be enabled
1639 */
1640 selection?: boolean;
1641
1642 /**
1643 * Indicates which key or keys enable multiple click selection
1644 * Pass value as a string or array of strings
1645 * values: 'altKey', 'shiftKey', 'ctrlKey'.
1646 * If `null` or empty or containing any other string that is not a modifier key
1647 * feature is disabled.
1648 * @since 1.6.2
1649 * @type String|Array
1650 * @default
1651 */
1652 selectionKey?: string | string[];
1653
1654 /**
1655 * Indicates which key enable alternative selection
1656 * in case of target overlapping with active object
1657 * values: 'altKey', 'shiftKey', 'ctrlKey'.
1658 * For a series of reason that come from the general expectations on how
1659 * things should work, this feature works only for preserveObjectStacking true.
1660 * If `null` or 'none' or any other string that is not a modifier key
1661 * feature is disabled.
1662 * @since 1.6.5
1663 * @type null|String
1664 * @default
1665 */
1666 altSelectionKey?: string | null;
1667
1668 /**
1669 * Color of selection
1670 */
1671 selectionColor?: string;
1672
1673 /**
1674 * Default dash array pattern
1675 * If not empty the selection border is dashed
1676 */
1677 selectionDashArray?: number[];
1678
1679 /**
1680 * Color of the border of selection (usually slightly darker than color of selection itself)
1681 */
1682 selectionBorderColor?: string;
1683
1684 /**
1685 * Width of a line used in object/group selection
1686 */
1687 selectionLineWidth?: number;
1688
1689 /**
1690 * Select only shapes that are fully contained in the dragged selection rectangle.
1691 * @type Boolean
1692 * @default
1693 */
1694 selectionFullyContained?: boolean;
1695
1696 /**
1697 * Default cursor value used when hovering over an object on canvas
1698 */
1699 hoverCursor?: string;
1700
1701 /**
1702 * Default cursor value used when moving an object on canvas
1703 */
1704 moveCursor?: string;
1705
1706 /**
1707 * Default cursor value used for the entire canvas
1708 */
1709 defaultCursor?: string;
1710
1711 /**
1712 * Cursor value used during free drawing
1713 */
1714 freeDrawingCursor?: string;
1715
1716 /**
1717 * Cursor value used for rotation point
1718 */
1719 rotationCursor?: string;
1720
1721 /**
1722 * Cursor value used for disabled elements ( corners with disabled action )
1723 * @type String
1724 * @since 2.0.0
1725 * @default
1726 */
1727 notAllowedCursor?: string;
1728
1729 /**
1730 * Default element class that's given to wrapper (div) element of canvas
1731 */
1732 containerClass?: string;
1733
1734 /**
1735 * When true, object detection happens on per-pixel basis rather than on per-bounding-box
1736 */
1737 perPixelTargetFind?: boolean;
1738
1739 /**
1740 * Number of pixels around target pixel to tolerate (consider active) during object detection
1741 */
1742 targetFindTolerance?: number;
1743
1744 /**
1745 * When true, target detection is skipped when hovering over canvas. This can be used to improve performance.
1746 */
1747 skipTargetFind?: boolean;
1748
1749 /**
1750 * When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing.
1751 * After mousedown, mousemove creates a shape,
1752 * and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas.
1753 */
1754 isDrawingMode?: boolean;
1755
1756 /**
1757 * Indicates whether objects should remain in current stack position when selected.
1758 * When false objects are brought to top and rendered as part of the selection group
1759 * @type Boolean
1760 */
1761 preserveObjectStacking?: boolean;
1762
1763 /**
1764 * Indicates the angle that an object will lock to while rotating.
1765 * @type Number
1766 * @since 1.6.7
1767 */
1768 snapAngle?: number;
1769
1770 /**
1771 * Indicates the distance from the snapAngle the rotation will lock to the snapAngle.
1772 * When `null`, the snapThreshold will default to the snapAngle.
1773 * @type null|Number
1774 * @since 1.6.7
1775 * @default
1776 */
1777 snapThreshold?: null | number;
1778
1779 /**
1780 * Indicates if the right click on canvas can output the context menu or not
1781 * @type Boolean
1782 * @since 1.6.5
1783 * @default
1784 */
1785 stopContextMenu?: boolean;
1786
1787 /**
1788 * Indicates if the canvas can fire right click events
1789 * @type Boolean
1790 * @since 1.6.5
1791 * @default
1792 */
1793 fireRightClick?: boolean;
1794
1795 /**
1796 * Indicates if the canvas can fire middle click events
1797 * @type Boolean
1798 * @since 1.7.8
1799 * @default
1800 */
1801 fireMiddleClick?: boolean;
1802}
1803export interface Canvas extends StaticCanvas { }
1804export interface Canvas extends ICanvasOptions { }
1805export class Canvas {
1806 /**
1807 * Constructor
1808 * @param element <canvas> element to initialize instance on
1809 * @param [options] Options object
1810 */
1811 constructor(element: HTMLCanvasElement | string, options?: ICanvasOptions);
1812
1813 _objects: Object[];
1814 /**
1815 * Renders both the top canvas and the secondary container canvas.
1816 * @return {fabric.Canvas} instance
1817 * @chainable
1818 */
1819 renderAll(): Canvas;
1820 /**
1821 * Method to render only the top canvas.
1822 * Also used to render the group selection box.
1823 * @return {fabric.Canvas} thisArg
1824 * @chainable
1825 */
1826 renderTop(): Canvas;
1827 /**
1828 * Checks if point is contained within an area of given object
1829 * @param {Event} e Event object
1830 * @param {fabric.Object} target Object to test against
1831 * @param {Object} [point] x,y object of point coordinates we want to check.
1832 * @return {Boolean} true if point is contained within an area of given object
1833 */
1834 containsPoint(e: Event, target: Object, point?: {x: number, y: number}): boolean;
1835 /**
1836 * Returns true if object is transparent at a certain location
1837 * @param {fabric.Object} target Object to check
1838 * @param {Number} x Left coordinate
1839 * @param {Number} y Top coordinate
1840 * @return {Boolean}
1841 */
1842 isTargetTransparent(target: Object, x: number, y: number): boolean;
1843 /**
1844 * Set the cursor type of the canvas element
1845 * @param {String} value Cursor type of the canvas element.
1846 * @see http://www.w3.org/TR/css3-ui/#cursor
1847 */
1848 setCursor(value: string): void;
1849 /**
1850 * Method that determines what object we are clicking on
1851 * the skipGroup parameter is for internal use, is needed for shift+click action
1852 * @param {Event} e mouse event
1853 * @param {Boolean} skipGroup when true, activeGroup is skipped and only objects are traversed through
1854 * @return {fabric.Object} the target found
1855 */
1856 findTarget(e: MouseEvent, skipGroup: boolean): Object;
1857 /**
1858 * Returns pointer coordinates without the effect of the viewport
1859 * @param {Object} pointer with "x" and "y" number values
1860 * @return {Object} object with "x" and "y" number values
1861 */
1862 restorePointerVpt(pointer: Point): any;
1863 /**
1864 * Returns pointer coordinates relative to canvas.
1865 * Can return coordinates with or without viewportTransform.
1866 * ignoreZoom false gives back coordinates that represent
1867 * the point clicked on canvas element.
1868 * ignoreZoom true gives back coordinates after being processed
1869 * by the viewportTransform ( sort of coordinates of what is displayed
1870 * on the canvas where you are clicking.
1871 * ignoreZoom true = HTMLElement coordinates relative to top,left
1872 * ignoreZoom false, default = fabric space coordinates, the same used for shape position
1873 * To interact with your shapes top and left you want to use ignoreZoom true
1874 * most of the time, while ignoreZoom false will give you coordinates
1875 * compatible with the object.oCoords system.
1876 * of the time.
1877 * @param {Event} e
1878 * @param {Boolean} ignoreZoom
1879 * @return {Object} object with "x" and "y" number values
1880 */
1881 getPointer(e: Event, ignoreZoom?: boolean): { x: number; y: number; };
1882 /**
1883 * Returns context of canvas where object selection is drawn
1884 * @return {CanvasRenderingContext2D}
1885 */
1886 getSelectionContext(): CanvasRenderingContext2D;
1887 /**
1888 * Returns <canvas> element on which object selection is drawn
1889 * @return {HTMLCanvasElement}
1890 */
1891 getSelectionElement(): HTMLCanvasElement;
1892 /**
1893 * Returns currently active object
1894 * @return {fabric.Object} active object
1895 */
1896 getActiveObject(): Object;
1897 /**
1898 * Returns an array with the current selected objects
1899 * @return {fabric.Object} active object
1900 */
1901 getActiveObjects(): Object[];
1902 /**
1903 * Sets given object as the only active object on canvas
1904 * @param {fabric.Object} object Object to set as an active one
1905 * @param {Event} [e] Event (passed along when firing "object:selected")
1906 * @return {fabric.Canvas} thisArg
1907 * @chainable
1908 */
1909 setActiveObject(object: Object, e?: Event): Canvas;
1910 /**
1911 * Discards currently active object and fire events. If the function is called by fabric
1912 * as a consequence of a mouse event, the event is passed as a parameter and
1913 * sent to the fire function for the custom events. When used as a method the
1914 * e param does not have any application.
1915 * @param {event} e
1916 * @return {fabric.Canvas} thisArg
1917 * @chainable
1918 */
1919 discardActiveObject(e?: Event): Canvas;
1920 /**
1921 * Clears a canvas element and removes all event listeners
1922 * @return {fabric.Canvas} thisArg
1923 * @chainable
1924 */
1925 dispose(): Canvas;
1926 /**
1927 * Clears all contexts (background, main, top) of an instance
1928 * @return {fabric.Canvas} thisArg
1929 * @chainable
1930 */
1931 clear(): Canvas;
1932 /**
1933 * Draws objects' controls (borders/controls)
1934 * @param {CanvasRenderingContext2D} ctx Context to render controls on
1935 */
1936 drawControls(ctx: CanvasRenderingContext2D): void;
1937 /**
1938 * @private
1939 * @return {Boolean} true if the scaling occurred
1940 */
1941 _setObjectScale(localMouse: Point, transform: any, lockScalingX: boolean, lockScalingY: boolean, by: 'x' | 'y' | undefined, lockScalingFlip: boolean, _dim: Point): boolean;
1942
1943 static EMPTY_JSON: string;
1944 /**
1945 * Provides a way to check support of some of the canvas methods
1946 * (either those of HTMLCanvasElement itself, or rendering context)
1947 * @param methodName Method to check support for; Could be one of "getImageData", "toDataURL", "toDataURLWithQuality" or "setLineDash"
1948 */
1949 static supports(methodName: "getImageData" | "toDataURL" | "toDataURLWithQuality" | "setLineDash"): boolean;
1950 /**
1951 * Returns JSON representation of canvas
1952 * @param [propertiesToInclude] Any properties that you might want to additionally include in the output
1953 */
1954 static toJSON(propertiesToInclude?: string[]): string;
1955 /**
1956 * Removes all event listeners
1957 */
1958 removeListeners(): void;
1959}
1960
1961///////////////////////////////////////////////////////////////////////////////
1962// Shape Interfaces
1963//////////////////////////////////////////////////////////////////////////////
1964
1965interface ICircleOptions extends IObjectOptions {
1966 /**
1967 * Radius of this circle
1968 */
1969 radius?: number;
1970 /**
1971 * Start angle of the circle, moving clockwise
1972 */
1973 startAngle?: number;
1974 /**
1975 * End angle of the circle
1976 */
1977 endAngle?: number;
1978}
1979export interface Circle extends Object, ICircleOptions { }
1980export class Circle {
1981 constructor(options?: ICircleOptions);
1982 /**
1983 * Returns horizontal radius of an object (according to how an object is scaled)
1984 */
1985 getRadiusX(): number;
1986 /**
1987 * Returns vertical radius of an object (according to how an object is scaled)
1988 */
1989 getRadiusY(): number;
1990 /**
1991 * Sets radius of an object (and updates width accordingly)
1992 */
1993 setRadius(value: number): number;
1994 /**
1995 * Returns svg representation of an instance
1996 * @return {Array} an array of strings with the specific svg representation
1997 * of the instance
1998 */
1999 _toSVG(): string;
2000 /**
2001 * List of attribute names to account for when parsing SVG element (used by {@link fabric.Circle.fromElement})
2002 */
2003 static ATTRIBUTE_NAMES: string[];
2004 /**
2005 * Returns Circle instance from an SVG element
2006 * @param element Element to parse
2007 * @param [options] Options object
2008 */
2009 static fromElement(element: SVGElement, options: ICircleOptions): Circle;
2010 /**
2011 * Returns Circle instance from an object representation
2012 * @param object Object to create an instance from
2013 */
2014 static fromObject(object: any): Circle;
2015}
2016
2017interface IEllipseOptions extends IObjectOptions {
2018 /**
2019 * Horizontal radius
2020 */
2021 rx?: number;
2022 /**
2023 * Vertical radius
2024 */
2025 ry?: number;
2026}
2027export interface Ellipse extends Object, IEllipseOptions { }
2028export class Ellipse {
2029 constructor(options?: IEllipseOptions);
2030 /**
2031 * Returns horizontal radius of an object (according to how an object is scaled)
2032 */
2033 getRx(): number;
2034 /**
2035 * Returns Vertical radius of an object (according to how an object is scaled)
2036 */
2037 getRy(): number;
2038 /**
2039 * Returns svg representation of an instance
2040 * @return {Array} an array of strings with the specific svg representation
2041 * of the instance
2042 */
2043 _toSVG(): string;
2044 /**
2045 * List of attribute names to account for when parsing SVG element (used by {@link fabric.Ellipse.fromElement})
2046 */
2047 static ATTRIBUTE_NAMES: string[];
2048 /**
2049 * Returns Ellipse instance from an SVG element
2050 * @param element Element to parse
2051 * @param [options] Options object
2052 */
2053 static fromElement(element: SVGElement, options?: IEllipseOptions): Ellipse;
2054 /**
2055 * Returns Ellipse instance from an object representation
2056 * @param object Object to create an instance from
2057 */
2058 static fromObject(object: any): Ellipse;
2059}
2060interface IGroupOptions extends IObjectOptions {
2061 /**
2062 * Indicates if click events should also check for subtargets
2063 * @type Boolean
2064 */
2065 subTargetCheck?: boolean;
2066 /**
2067 * setOnGroup is a method used for TextBox that is no more used since 2.0.0 The behavior is still
2068 * available setting this boolean to true.
2069 * @type Boolean
2070 * @since 2.0.0
2071 * @default
2072 */
2073 useSetOnGroup?: boolean;
2074}
2075export interface Group extends Object, ICollection<Group>, IGroupOptions { }
2076export class Group {
2077 /**
2078 * Constructor
2079 * @param objects Group objects
2080 * @param [options] Options object
2081 */
2082 constructor(objects?: Object[], options?: IGroupOptions, isAlreadyGrouped?: boolean);
2083 /**
2084 * Adds an object to a group; Then recalculates group's dimension, position.
2085 * @param [Object] object
2086 * @return thisArg
2087 * @chainable
2088 */
2089 addWithUpdate(object?: Object): Group;
2090 /**
2091 * Removes an object from a group; Then recalculates group's dimension, position.
2092 * @return thisArg
2093 * @chainable
2094 */
2095 removeWithUpdate(object: Object): Group;
2096 /**
2097 * Renders instance on a given context
2098 * @param ctx context to render instance on
2099 */
2100 render(ctx: CanvasRenderingContext2D): void;
2101 /**
2102 * Decide if the object should cache or not. Create its own cache level
2103 * objectCaching is a global flag, wins over everything
2104 * needsItsOwnCache should be used when the object drawing method requires
2105 * a cache step. None of the fabric classes requires it.
2106 * Generally you do not cache objects in groups because the group outside is cached.
2107 * @return {Boolean}
2108 */
2109 shouldCache(): boolean;
2110 /**
2111 * Check if this object or a child object will cast a shadow
2112 * @return {Boolean}
2113 */
2114 willDrawShadow(): boolean;
2115 /**
2116 * Check if this group or its parent group are caching, recursively up
2117 * @return {Boolean}
2118 */
2119 isOnACache(): boolean;
2120 /**
2121 * Execute the drawing operation for an object on a specified context
2122 * @param {CanvasRenderingContext2D} ctx Context to render on
2123 */
2124 drawObject(ctx: CanvasRenderingContext2D): void;
2125 /**
2126 * Check if cache is dirty
2127 */
2128 isCacheDirty(skipCanvas?: boolean): boolean;
2129 /**
2130 * Realises the transform from this group onto the supplied object
2131 * i.e. it tells you what would happen if the supplied object was in
2132 * the group, and then the group was destroyed. It mutates the supplied
2133 * object.
2134 * @param {fabric.Object} object
2135 * @return {fabric.Object} transformedObject
2136 */
2137 realizeTransform(object: Object): Object;
2138 /**
2139 * Destroys a group (restoring state of its objects)
2140 * @return {fabric.Group} thisArg
2141 * @chainable
2142 */
2143 destroy(): Group;
2144 /**
2145 * make a group an active selection, remove the group from canvas
2146 * the group has to be on canvas for this to work.
2147 * @return {fabric.ActiveSelection} thisArg
2148 * @chainable
2149 */
2150 toActiveSelection(): ActiveSelection;
2151 /**
2152 * Destroys a group (restoring state of its objects)
2153 * @return {fabric.Group} thisArg
2154 * @chainable
2155 */
2156 ungroupOnCanvas(): Group;
2157 /**
2158 * Sets coordinates of all group objects
2159 * @return thisArg
2160 * @chainable
2161 */
2162 setObjectsCoords(): Group;
2163 /**
2164 * Returns svg representation of an instance
2165 * @param [reviver] Method for further parsing of svg representation.
2166 * @return svg representation of an instance
2167 */
2168 toSVG(reviver?: Function): string;
2169 /**
2170 * Returns svg clipPath representation of an instance
2171 * @param {Function} [reviver] Method for further parsing of svg representation.
2172 * @return {String} svg representation of an instance
2173 */
2174 toClipPathSVG(reviver?: Function): string;
2175 /**
2176 * Adds an object to a group; Then recalculates group's dimension, position.
2177 * @param {Object} object
2178 * @return {fabric.Group} thisArg
2179 * @chainable
2180 */
2181 addWithUpdate(object: Object): Group;
2182 /**
2183 * Returns {@link fabric.Group} instance from an object representation
2184 * @param object Object to create a group from
2185 * @param [callback] Callback to invoke when an group instance is created
2186 */
2187 static fromObject(object: any, callback: (group: Group) => any): void;
2188}
2189
2190///////////////////////////////////////////////////////////////////////////////
2191// ActiveSelection
2192//////////////////////////////////////////////////////////////////////////////
2193export interface ActiveSelection extends Group, ICollection<Group> { }
2194export class ActiveSelection {
2195 /**
2196 * Constructor
2197 * @param objects ActiveSelection objects
2198 * @param [options] Options object
2199 */
2200 constructor(objects?: Object[], options?: IObjectOptions);
2201 /**
2202 * Change te activeSelection to a normal group,
2203 * High level function that automatically adds it to canvas as
2204 * active object. no events fired.
2205 */
2206 toGroup(): Group;
2207 /**
2208 * Returns {@link fabric.ActiveSelection} instance from an object representation
2209 * @memberOf fabric.ActiveSelection
2210 * @param object Object to create a group from
2211 * @param [callback] Callback to invoke when an ActiveSelection instance is created
2212 */
2213 static fromObject(object: any, callback: Function): void;
2214}
2215
2216interface IImageOptions extends IObjectOptions {
2217 /**
2218 * crossOrigin value (one of "", "anonymous", "allow-credentials")
2219 */
2220 crossOrigin?: string;
2221 /**
2222 * When calling {@link fabric.Image.getSrc}, return value from element src with `element.getAttribute('src')`.
2223 * This allows for relative urls as image src.
2224 * @since 2.7.0
2225 * @type Boolean
2226 */
2227 srcFromAttribute?: boolean;
2228 /**
2229 * minimum scale factor under which any resizeFilter is triggered to resize the image
2230 * 0 will disable the automatic resize. 1 will trigger automatically always.
2231 * number bigger than 1 are not implemented yet.
2232 * @type Number
2233 */
2234 minimumScaleTrigger?: number;
2235 /**
2236 * key used to retrieve the texture representing this image
2237 * @since 2.0.0
2238 * @type String
2239 */
2240 cacheKey?: string;
2241 /**
2242 * Image crop in pixels from original image size.
2243 * @since 2.0.0
2244 * @type Number
2245 */
2246 cropX?: number;
2247 /**
2248 * Image crop in pixels from original image size.
2249 * @since 2.0.0
2250 * @type Number
2251 */
2252 cropY?: number;
2253 /**
2254 * Image filter array
2255 */
2256 filters?: IBaseFilter[];
2257}
2258interface Image extends Object, IImageOptions { }
2259export class Image {
2260 /**
2261 * Constructor
2262 * @param element Image element
2263 * @param [options] Options object
2264 */
2265 constructor(element?: string | HTMLImageElement, options?: IImageOptions);
2266 /**
2267 * Returns image element which this instance if based on
2268 * @return Image element
2269 */
2270 getElement(): HTMLImageElement;
2271 /**
2272 * Sets image element for this instance to a specified one.
2273 * If filters defined they are applied to new image.
2274 * You might need to call `canvas.renderAll` and `object.setCoords` after replacing, to render new image and update controls area.
2275 * @param element image element
2276 * @param [options] Options object
2277 */
2278 setElement(element: HTMLImageElement, options?: IImageOptions): Image;
2279 /**
2280 * Delete a single texture if in webgl mode
2281 */
2282 removeTexture(key: any): void;
2283 /**
2284 * Delete textures, reference to elements and eventually JSDOM cleanup
2285 */
2286 dispose(): void;
2287 /**
2288 * Sets crossOrigin value (on an instance and corresponding image element)
2289 */
2290 setCrossOrigin(value: string): Image;
2291 /**
2292 * Returns original size of an image
2293 * @return Object with "width" and "height" properties
2294 */
2295 getOriginalSize(): { width: number; height: number; };
2296 /**
2297 * Returns true if an image has crop applied, inspecting values of cropX,cropY,width,hight.
2298 * @return {Boolean}
2299 */
2300 hasCrop(): boolean;
2301 /**
2302 * Returns svg representation of an instance
2303 * @return {Array} an array of strings with the specific svg representation
2304 * of the instance
2305 */
2306 _toSVG(): string;
2307 /**
2308 * Returns source of an image
2309 * @return Source of an image
2310 */
2311 getSrc(): string;
2312 /**
2313 * Sets source of an image
2314 * @param {String} src Source string (URL)
2315 * @param {Function} [callback] Callback is invoked when image has been loaded (and all filters have been applied)
2316 * @param {Object} [options] Options object
2317 * @return {fabric.Image} thisArg
2318 * @chainable
2319 */
2320 setSrc(src: string, callback?: Function, options?: IImageOptions): Image;
2321 applyResizeFilters(): void;
2322 /**
2323 * Applies filters assigned to this image (from "filters" array) or from filter param
2324 * @param {Array} filters to be applied
2325 * @return {thisArg} return the fabric.Image object
2326 * @chainable
2327 */
2328 applyFilters(filters?: IBaseFilter[]): Image;
2329 /**
2330 * Calculate offset for center and scale factor for the image in order to respect
2331 * the preserveAspectRatio attribute
2332 * @private
2333 * @return {Object}
2334 */
2335 parsePreserveAspectRatioAttribute(): any;
2336 /**
2337 * Creates an instance of fabric.Image from an URL string
2338 * @param url URL to create an image from
2339 * @param [callback] Callback to invoke when image is created (newly created image is passed as a first argument)
2340 * @param [imgOptions] Options object
2341 */
2342 static fromURL(url: string, callback?: (image: Image) => void, imgOptions?: IImageOptions): Image;
2343 /**
2344 * Returns Image instance from an SVG element
2345 * @param element Element to parse
2346 * @param callback Callback to execute when fabric.Image object is created
2347 * @param [options] Options object
2348 */
2349 static fromElement(element: SVGElement, callback: Function, options?: IImageOptions): Image;
2350 /**
2351 * Default CSS class name for canvas
2352 */
2353 static CSS_CANVAS: string;
2354 static filters: IAllFilters;
2355 static ATTRIBUTE_NAMES: string[];
2356}
2357
2358interface ILineOptions extends IObjectOptions {
2359 /**
2360 * x value or first line edge
2361 */
2362 x1?: number;
2363 /**
2364 * x value or second line edge
2365 */
2366 x2?: number;
2367 /**
2368 * y value or first line edge
2369 */
2370 y1?: number;
2371 /**
2372 * y value or second line edge
2373 */
2374 y2?: number;
2375}
2376export interface Line extends Object, ILineOptions { }
2377export class Line {
2378 /**
2379 * Constructor
2380 * @param [points] Array of points
2381 * @param [options] Options object
2382 */
2383 constructor(points?: number[], objObjects?: ILineOptions);
2384 /**
2385 * Returns svg representation of an instance
2386 * @return {Array} an array of strings with the specific svg representation
2387 * of the instance
2388 */
2389 _toSVG(): string;
2390 /**
2391 * Returns fabric.Line instance from an SVG element
2392 * @static
2393 * @memberOf fabric.Line
2394 * @param {SVGElement} element Element to parse
2395 * @param {Object} [options] Options object
2396 * @param {Function} [callback] callback function invoked after parsing
2397 */
2398 static fromElement(element: SVGElement, callback?: Function, options?: ILineOptions): Line;
2399 /**
2400 * Returns fabric.Line instance from an object representation
2401 * @param object Object to create an instance from
2402 */
2403 static fromObject(object: any): Line;
2404 static ATTRIBUTE_NAMES: string[];
2405 /**
2406 * Produces a function that calculates distance from canvas edge to Line origin.
2407 */
2408 makeEdgeToOriginGetter(propertyNames: {origin: number, axis1: any, axis2: any, dimension: any}, originValues: {nearest: any, center: any, farthest: any}): Function;
2409 /**
2410 * Recalculates line points given width and height
2411 * @private
2412 */
2413 calcLinePoints(): {x1: number, x2: number, y1: number, y2: number};
2414}
2415
2416interface IObjectOptions {
2417 /**
2418 * Type of an object (rect, circle, path, etc.).
2419 * Note that this property is meant to be read-only and not meant to be modified.
2420 * If you modify, certain parts of Fabric (such as JSON loading) won't work correctly.
2421 */
2422 type?: string;
2423
2424 /**
2425 * Horizontal origin of transformation of an object (one of "left", "right", "center")
2426 */
2427 originX?: string;
2428
2429 /**
2430 * Vertical origin of transformation of an object (one of "top", "bottom", "center")
2431 */
2432 originY?: string;
2433
2434 /**
2435 * Top position of an object. Note that by default it's relative to object center. You can change this by setting originY={top/center/bottom}
2436 */
2437 top?: number;
2438
2439 /**
2440 * Left position of an object. Note that by default it's relative to object center. You can change this by setting originX={left/center/right}
2441 */
2442 left?: number;
2443
2444 /**
2445 * Object width
2446 */
2447 width?: number;
2448
2449 /**
2450 * Object height
2451 */
2452 height?: number;
2453
2454 /**
2455 * Object scale factor (horizontal)
2456 */
2457 scaleX?: number;
2458
2459 /**
2460 * Object scale factor (vertical)
2461 */
2462 scaleY?: number;
2463
2464 /**
2465 * When true, an object is rendered as flipped horizontally
2466 */
2467 flipX?: boolean;
2468
2469 /**
2470 * When true, an object is rendered as flipped vertically
2471 */
2472 flipY?: boolean;
2473
2474 /**
2475 * Opacity of an object
2476 */
2477 opacity?: number;
2478
2479 /**
2480 * Angle of rotation of an object (in degrees)
2481 */
2482 angle?: number;
2483
2484 /**
2485 * Object skew factor (horizontal)
2486 */
2487 skewX?: number;
2488
2489 /**
2490 * Object skew factor (vertical)
2491 */
2492 skewY?: number;
2493
2494 /**
2495 * Size of object's controlling corners (in pixels)
2496 */
2497 cornerSize?: number;
2498
2499 /**
2500 * When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill)
2501 */
2502 transparentCorners?: boolean;
2503
2504 /**
2505 * Default cursor value used when hovering over this object on canvas
2506 */
2507 hoverCursor?: string;
2508
2509 /**
2510 * Default cursor value used when moving an object on canvas
2511 */
2512 moveCursor?: string;
2513
2514 /**
2515 * Padding between object and its controlling borders (in pixels)
2516 */
2517 padding?: number;
2518
2519 /**
2520 * Color of controlling borders of an object (when it's active)
2521 */
2522 borderColor?: string;
2523
2524 /**
2525 * Array specifying dash pattern of an object's border (hasBorder must be true)
2526 */
2527 borderDashArray?: number[];
2528
2529 /**
2530 * Color of controlling corners of an object (when it's active)
2531 */
2532 cornerColor?: string;
2533
2534 /**
2535 * Color of controlling corners of an object (when it's active and transparentCorners false)
2536 */
2537 cornerStrokeColor?: string;
2538
2539 /**
2540 * Specify style of control, 'rect' or 'circle'
2541 */
2542 cornerStyle?: "rect" | "circle";
2543
2544 /**
2545 * Array specifying dash pattern of an object's control (hasBorder must be true)
2546 */
2547 cornerDashArray?: number[];
2548
2549 /**
2550 * When true, this object will use center point as the origin of transformation
2551 * when being scaled via the controls.
2552 * <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
2553 */
2554 centeredScaling?: boolean;
2555
2556 /**
2557 * When true, this object will use center point as the origin of transformation
2558 * when being rotated via the controls.
2559 * <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
2560 */
2561 centeredRotation?: boolean;
2562
2563 /**
2564 * Color of object's fill
2565 */
2566 fill?: string | Pattern;
2567
2568 /**
2569 * Fill rule used to fill an object
2570 * accepted values are nonzero, evenodd
2571 * Backwards incompatibility note: This property was used for setting globalCompositeOperation until v1.4.12, use `globalCompositeOperation` instead
2572 */
2573 fillRule?: string;
2574
2575 /**
2576 * Composite rule used for canvas globalCompositeOperation
2577 */
2578 globalCompositeOperation?: string;
2579
2580 /**
2581 * Background color of an object. Only works with text objects at the moment.
2582 */
2583 backgroundColor?: string;
2584
2585 /**
2586 * Selection Background color of an object. colored layer behind the object when it is active.
2587 * does not mix good with globalCompositeOperation methods.
2588 * @type String
2589 */
2590 selectionBackgroundColor?: string;
2591
2592 /**
2593 * When defined, an object is rendered via stroke and this property specifies its color
2594 */
2595 stroke?: string;
2596
2597 /**
2598 * Width of a stroke used to render this object
2599 */
2600 strokeWidth?: number;
2601
2602 /**
2603 * Array specifying dash pattern of an object's stroke (stroke must be defined)
2604 */
2605 strokeDashArray?: number[];
2606
2607 /**
2608 * Line offset of an object's stroke
2609 * @type Number
2610 * @default
2611 */
2612 strokeDashOffset?: number;
2613
2614 /**
2615 * Line endings style of an object's stroke (one of "butt", "round", "square")
2616 */
2617 strokeLineCap?: string;
2618
2619 /**
2620 * Corner style of an object's stroke (one of "bevil", "round", "miter")
2621 */
2622 strokeLineJoin?: string;
2623
2624 /**
2625 * Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke
2626 */
2627 strokeMiterLimit?: number;
2628
2629 /**
2630 * Shadow object representing shadow of this shape
2631 */
2632 shadow?: Shadow | string;
2633
2634 /**
2635 * Opacity of object's controlling borders when object is active and moving
2636 */
2637 borderOpacityWhenMoving?: number;
2638
2639 /**
2640 * Scale factor of object's controlling borders
2641 */
2642 borderScaleFactor?: number;
2643
2644 /**
2645 * Transform matrix (similar to SVG's transform matrix)
2646 */
2647 transformMatrix?: any[];
2648
2649 /**
2650 * Minimum allowed scale value of an object
2651 */
2652 minScaleLimit?: number;
2653
2654 /**
2655 * When set to `false`, an object can not be selected for modification (using either point-click-based or group-based selection).
2656 * But events still fire on it.
2657 */
2658 selectable?: boolean;
2659
2660 /**
2661 * When set to `false`, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4
2662 */
2663 evented?: boolean;
2664
2665 /**
2666 * When set to `false`, an object is not rendered on canvas
2667 */
2668 visible?: boolean;
2669
2670 /**
2671 * When set to `false`, object's controls are not displayed and can not be used to manipulate object
2672 */
2673 hasControls?: boolean;
2674
2675 /**
2676 * When set to `false`, object's controlling borders are not rendered
2677 */
2678 hasBorders?: boolean;
2679
2680 /**
2681 * When set to `false`, object's controlling rotating point will not be visible or selectable
2682 */
2683 hasRotatingPoint?: boolean;
2684
2685 /**
2686 * Offset for object's controlling rotating point (when enabled via `hasRotatingPoint`)
2687 */
2688 rotatingPointOffset?: number;
2689
2690 /**
2691 * When set to `true`, objects are "found" on canvas on per-pixel basis rather than according to bounding box
2692 */
2693 perPixelTargetFind?: boolean;
2694
2695 /**
2696 * When `false`, default object's values are not included in its serialization
2697 */
2698 includeDefaultValues?: boolean;
2699
2700 /**
2701 * Function that determines clipping of an object (context is passed as a first argument)
2702 * Note that context origin is at the object's center point (not left/top corner)
2703 */
2704 clipTo?: Function;
2705
2706 /**
2707 * When `true`, object horizontal movement is locked
2708 */
2709 lockMovementX?: boolean;
2710
2711 /**
2712 * When `true`, object vertical movement is locked
2713 */
2714 lockMovementY?: boolean;
2715
2716 /**
2717 * When `true`, object rotation is locked
2718 */
2719 lockRotation?: boolean;
2720
2721 /**
2722 * When `true`, object horizontal scaling is locked
2723 */
2724 lockScalingX?: boolean;
2725
2726 /**
2727 * When `true`, object vertical scaling is locked
2728 */
2729 lockScalingY?: boolean;
2730
2731 /**
2732 * When `true`, object non-uniform scaling is locked
2733 */
2734 lockUniScaling?: boolean;
2735
2736 /**
2737 * When `true`, object horizontal skewing is locked
2738 * @type Boolean
2739 */
2740 lockSkewingX?: boolean;
2741
2742 /**
2743 * When `true`, object vertical skewing is locked
2744 * @type Boolean
2745 */
2746 lockSkewingY?: boolean;
2747
2748 /**
2749 * When `true`, object cannot be flipped by scaling into negative values
2750 */
2751 lockScalingFlip?: boolean;
2752
2753 /**
2754 * When `true`, object is not exported in OBJECT/JSON
2755 * since 1.6.3
2756 * @type Boolean
2757 * @default
2758 */
2759 excludeFromExport?: boolean;
2760
2761 /**
2762 * When `true`, object is cached on an additional canvas.
2763 */
2764 objectCaching?: boolean;
2765
2766 /**
2767 * When `true`, object properties are checked for cache invalidation. In some particular
2768 * situation you may want this to be disabled ( spray brush, very big, groups)
2769 * or if your application does not allow you to modify properties for groups child you want
2770 * to disable it for groups.
2771 * default to false
2772 * since 1.7.0
2773 * @type Boolean
2774 * @default false
2775 */
2776 statefullCache?: boolean;
2777
2778 /**
2779 * When `true`, cache does not get updated during scaling. The picture will get blocky if scaled
2780 * too much and will be redrawn with correct details at the end of scaling.
2781 * this setting is performance and application dependant.
2782 * default to true
2783 * since 1.7.0
2784 * @type Boolean
2785 */
2786 noScaleCache?: boolean;
2787
2788 /**
2789 * When `false`, the stoke width will scale with the object.
2790 * When `true`, the stroke will always match the exact pixel size entered for stroke width.
2791 * default to false
2792 * @since 2.6.0
2793 * @type Boolean
2794 * @default false
2795 * @type Boolean
2796 */
2797 strokeUniform?: boolean;
2798
2799 /**
2800 * When set to `true`, object's cache will be rerendered next render call.
2801 */
2802 dirty?: boolean;
2803
2804 /**
2805 * Determines if the fill or the stroke is drawn first (one of "fill" or "stroke")
2806 * @type String
2807 */
2808 paintFirst?: string;
2809
2810 /**
2811 * List of properties to consider when checking if state
2812 * of an object is changed (fabric.Object#hasStateChanged)
2813 * as well as for history (undo/redo) purposes
2814 * @type Array
2815 */
2816 stateProperties?: string[];
2817
2818 /**
2819 * List of properties to consider when checking if cache needs refresh
2820 * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single
2821 * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty
2822 * and refreshed at the next render
2823 * @type Array
2824 */
2825 cacheProperties?: string[];
2826
2827 /**
2828 * A fabricObject that, without stroke define a clipping area with their shape. filled in black
2829 * the clipPath object gets used when the object has rendered, and the context is placed in the center
2830 * of the object cacheCanvas.
2831 * If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center'
2832 */
2833 clipPath?: Object;
2834
2835 /**
2836 * Meaningful ONLY when the object is used as clipPath.
2837 * if true, the clipPath will make the object clip to the outside of the clipPath
2838 * since 2.4.0
2839 * @type boolean
2840 * @default false
2841 */
2842 inverted?: boolean;
2843
2844 /**
2845 * Meaningful ONLY when the object is used as clipPath.
2846 * if true, the clipPath will have its top and left relative to canvas, and will
2847 * not be influenced by the object transform. This will make the clipPath relative
2848 * to the canvas, but clipping just a particular object.
2849 * WARNING this is beta, this feature may change or be renamed.
2850 * since 2.4.0
2851 * @type boolean
2852 * @default false
2853 */
2854 absolutePositioned?: boolean;
2855
2856 /**
2857 * Not used by fabric, just for convenience
2858 */
2859 name?: string;
2860
2861 /**
2862 * Not used by fabric, just for convenience
2863 */
2864 data?: any;
2865 /**
2866 * Describe object's corner position in canvas element coordinates.
2867 * properties are tl,mt,tr,ml,mr,bl,mb,br,mtr for the main controls.
2868 * each property is an object with x, y and corner.
2869 * The `corner` property contains in a similar manner the 4 points of the
2870 * interactive area of the corner.
2871 * The coordinates depends from this properties: width, height, scaleX, scaleY
2872 * skewX, skewY, angle, strokeWidth, viewportTransform, top, left, padding.
2873 * The coordinates get updated with @method setCoords.
2874 * You can calculate them without updating with @method calcCoords;
2875 * @memberOf fabric.Object.prototype
2876 */
2877 oCoords?: {tl: Point, mt: Point, tr: Point, ml: Point, mr: Point, bl: Point, mb: Point, br: Point, mtr: Point};
2878 /**
2879 * Describe object's corner position in canvas object absolute coordinates
2880 * properties are tl,tr,bl,br and describe the four main corner.
2881 * each property is an object with x, y, instance of Fabric.Point.
2882 * The coordinates depends from this properties: width, height, scaleX, scaleY
2883 * skewX, skewY, angle, strokeWidth, top, left.
2884 * Those coordinates are usefull to understand where an object is. They get updated
2885 * with oCoords but they do not need to be updated when zoom or panning change.
2886 * The coordinates get updated with @method setCoords.
2887 * You can calculate them without updating with @method calcCoords(true);
2888 * @memberOf fabric.Object.prototype
2889 */
2890 aCoords?: {bl: Point, br: Point, tl: Point, tr: Point};
2891 /**
2892 * storage for object full transform matrix
2893 */
2894 matrixCache?: any;
2895 /**
2896 * storage for object transform matrix
2897 */
2898 ownMatrixCache?: any;
2899
2900 /**
2901 * Indicates the angle that an object will lock to while rotating. Can get from canvas.
2902 */
2903 snapAngle?: number;
2904 /**
2905 * Indicates the distance from the snapAngle the rotation will lock to the snapAngle. Can get from canvas.
2906 */
2907 snapThreshold?: null | number;
2908 /**
2909 * The group the object is part of
2910 */
2911 group?: Group;
2912 /**
2913 * The canvas the object belongs to
2914 */
2915 canvas?: Canvas;
2916}
2917export interface Object extends IObservable<Object>, IObjectOptions, IObjectAnimation<Object> { }
2918export class Object {
2919 constructor(options?: IObjectOptions);
2920 initialize(options?: IObjectOptions): Object;
2921
2922 /* Sets object's properties from options
2923 * @param {Object} [options] Options object
2924 */
2925 setOptions(options: IObjectOptions): void;
2926
2927 /**
2928 * Transforms context when rendering an object
2929 * @param {CanvasRenderingContext2D} ctx Context
2930 */
2931 transform(ctx: CanvasRenderingContext2D): void;
2932
2933 /**
2934 * Returns an object representation of an instance
2935 * @param [propertiesToInclude] Any properties that you might want to additionally include in the output
2936 */
2937 toObject(propertiesToInclude?: string[]): any;
2938
2939 /**
2940 * Returns (dataless) object representation of an instance
2941 * @param [propertiesToInclude] Any properties that you might want to additionally include in the output
2942 */
2943 toDatalessObject(propertiesToInclude?: string[]): any;
2944
2945 /**
2946 * Returns a string representation of an instance
2947 */
2948 toString(): string;
2949
2950 /**
2951 * Return the object scale factor counting also the group scaling
2952 * @return {Object} object with scaleX and scaleY properties
2953 */
2954 getObjectScaling(): {scaleX: number, scaleY: number};
2955
2956 /**
2957 * Return the object scale factor counting also the group scaling, zoom and retina
2958 * @return {Object} object with scaleX and scaleY properties
2959 */
2960 getTotalObjectScaling(): {scaleX: number, scaleY: number};
2961
2962 /**
2963 * Return the object opacity counting also the group property
2964 * @return {Number}
2965 */
2966 getObjectOpacity(): number;
2967
2968 /**
2969 * This callback function is called by the parent group of an object every
2970 * time a non-delegated property changes on the group. It is passed the key
2971 * and value as parameters. Not adding in this function's signature to avoid
2972 * Travis build error about unused variables.
2973 */
2974 setOnGroup(): void;
2975
2976 /**
2977 * Retrieves viewportTransform from Object's canvas if possible
2978 */
2979 getViewportTransform(): any[];
2980
2981 /**
2982 * Renders an object on a specified context
2983 * @param {CanvasRenderingContext2D} ctx Context to render on
2984 */
2985 render(ctx: CanvasRenderingContext2D): void;
2986
2987 /**
2988 * When set to `true`, force the object to have its own cache, even if it is inside a group
2989 * it may be needed when your object behave in a particular way on the cache and always needs
2990 * its own isolated canvas to render correctly.
2991 * Created to be overridden
2992 * since 1.7.12
2993 * @returns false
2994 */
2995 needsItsOwnCache(): boolean;
2996
2997 /**
2998 * Decide if the object should cache or not. Create its own cache level
2999 * objectCaching is a global flag, wins over everything
3000 * needsItsOwnCache should be used when the object drawing method requires
3001 * a cache step. None of the fabric classes requires it.
3002 * Generally you do not cache objects in groups because the group outside is cached.
3003 * @return {Boolean}
3004 */
3005 shouldCache(): boolean;
3006
3007 /**
3008 * Check if this object or a child object will cast a shadow
3009 * used by Group.shouldCache to know if child has a shadow recursively
3010 * @return {Boolean}
3011 */
3012 willDrawShadow(): boolean;
3013
3014 /**
3015 * Execute the drawing operation for an object clipPath
3016 * @param {CanvasRenderingContext2D} ctx Context to render on
3017 */
3018 drawClipPathOnCache(ctx: CanvasRenderingContext2D): void;
3019
3020 /**
3021 * Execute the drawing operation for an object on a specified context
3022 * @param {CanvasRenderingContext2D} ctx Context to render on
3023 */
3024 drawObject(ctx: CanvasRenderingContext2D): void;
3025
3026 /**
3027 * Paint the cached copy of the object on the target context.
3028 * @param {CanvasRenderingContext2D} ctx Context to render on
3029 */
3030 drawCacheOnCanvas(ctx: CanvasRenderingContext2D): void;
3031
3032 /**
3033 * Check if cache is dirty
3034 * @param {Boolean} skipCanvas skip canvas checks because this object is painted
3035 * on parent canvas.
3036 */
3037 isCacheDirty(skipCanvas?: boolean): boolean;
3038
3039 /**
3040 * Clones an instance, using a callback method will work for every object.
3041 * @param callback Callback is invoked with a clone as a first argument
3042 * @param [propertiesToInclude] Any properties that you might want to additionally include in the output
3043 */
3044 clone(callback: Function, propertiesToInclude?: string[]): void;
3045
3046 /**
3047 * Creates an instance of fabric.Image out of an object
3048 * @param callback callback, invoked with an instance as a first argument
3049 */
3050 cloneAsImage(callback: Function, options?: IDataURLOptions): Object;
3051
3052 /**
3053 * Converts an object into a HTMLCanvas element
3054 * @param {Object} options Options object
3055 * @param {Number} [options.multiplier=1] Multiplier to scale by
3056 * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14
3057 * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14
3058 * @param {Number} [options.width] Cropping width. Introduced in v1.2.14
3059 * @param {Number} [options.height] Cropping height. Introduced in v1.2.14
3060 * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4
3061 * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4
3062 * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2
3063 * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format
3064 */
3065 toCanvasElement(options?: IDataURLOptions): string;
3066
3067 /**
3068 * Converts an object into a data-url-like string
3069 * @param options Options object
3070 */
3071 toDataURL(options: IDataURLOptions): string;
3072
3073 /**
3074 * Returns true if specified type is identical to the type of an instance
3075 * @param type Type to check against
3076 */
3077 isType(type: string): boolean;
3078
3079 /**
3080 * Returns complexity of an instance
3081 */
3082 complexity(): number;
3083
3084 /**
3085 * Returns a JSON representation of an instance
3086 * @param [propertiesToInclude] Any properties that you might want to additionally include in the output
3087 */
3088 toJSON(propertiesToInclude?: string[]): any;
3089
3090 /**
3091 * Sets gradient (fill or stroke) of an object
3092 * **Backwards incompatibility note:** This method was named "setGradientFill" until v1.1.0
3093 * @param property Property name 'stroke' or 'fill'
3094 * @param [options] Options object
3095 */
3096 setGradient(property: "stroke" | "fill", options?: IGradientOptions): Object;
3097
3098 /**
3099 * Sets pattern fill of an object
3100 * @param options Options object
3101 */
3102 setPatternFill(options: IFillOptions, callback: Function): Object;
3103
3104 /**
3105 * Sets shadow of an object
3106 * @param [options] Options object or string (e.g. "2px 2px 10px rgba(0,0,0,0.2)")
3107 */
3108 setShadow(options?: string | Shadow): Object;
3109
3110 /**
3111 * Sets "color" of an instance (alias of `set('fill', …)`)
3112 * @param color Color value
3113 */
3114 setColor(color: string): Object;
3115
3116 /**
3117 * Sets "angle" of an instance
3118 * @param angle Angle value
3119 */
3120 rotate(angle: number): Object;
3121
3122 /**
3123 * Centers object horizontally on canvas to which it was added last.
3124 * You might need to call `setCoords` on an object after centering, to update controls area.
3125 */
3126 centerH(): Object;
3127
3128 /**
3129 * Centers object horizontally on current viewport of canvas to which it was added last.
3130 * You might need to call `setCoords` on an object after centering, to update controls area.
3131 * @return {fabric.Object} thisArg
3132 * @chainable
3133 */
3134 viewportCenterH(): Object;
3135
3136 /**
3137 * Centers object vertically on canvas to which it was added last.
3138 * You might need to call `setCoords` on an object after centering, to update controls area.
3139 */
3140 centerV(): Object;
3141
3142 /**
3143 * Centers object vertically on current viewport of canvas to which it was added last.
3144 * You might need to call `setCoords` on an object after centering, to update controls area.
3145 * @return {fabric.Object} thisArg
3146 * @chainable
3147 */
3148 viewportCenterV(): Object;
3149
3150 /**
3151 * Centers object vertically and horizontally on canvas to which is was added last
3152 * You might need to call `setCoords` on an object after centering, to update controls area.
3153 */
3154 center(): Object;
3155
3156 /**
3157 * Centers object on current viewport of canvas to which it was added last.
3158 * You might need to call `setCoords` on an object after centering, to update controls area.
3159 * @return {fabric.Object} thisArg
3160 * @chainable
3161 */
3162 viewportCenter(): Object;
3163
3164 /**
3165 * Returns coordinates of a pointer relative to an object
3166 * @param e Event to operate upon
3167 * @param [pointer] Pointer to operate upon (instead of event)
3168 */
3169 getLocalPointer(e: Event, pointer?: { x: number, y: number }): { x: number, y: number };
3170
3171 /**
3172 * Basic getter
3173 * @param property Property name
3174 */
3175 get<K extends keyof this>(property: K): this[K];
3176
3177 /**
3178 * Sets property to a given value.
3179 * When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls.
3180 * If you need to update those, call `setCoords()`.
3181 * @param key Property name
3182 * @param value Property value (if function, the value is passed into it and its return value is used as a new one)
3183 */
3184 set<K extends keyof this>(key: K, value: this[K] | ((value: this[K]) => this[K])): Object;
3185
3186 /**
3187 * Sets property to a given value.
3188 * When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls.
3189 * If you need to update those, call `setCoords()`.
3190 * @param options Property object, iterate over the object properties
3191 */
3192 set(options: Partial<this>): Object;
3193
3194 /**
3195 * Toggles specified property from `true` to `false` or from `false` to `true`
3196 * @param property Property to toggle
3197 */
3198 toggle(property: keyof this): Object;
3199
3200 /**
3201 * Sets sourcePath of an object
3202 * @param value Value to set sourcePath to
3203 */
3204 setSourcePath(value: string): Object;
3205
3206 /**
3207 * Sets "angle" of an instance
3208 * @param angle Angle value
3209 */
3210 setAngle(angle: number): Object;
3211
3212 /**
3213 * Sets object's properties from options
3214 * @param [options] Options object
3215 */
3216 setOptions(options?: any): void;
3217 /**
3218 * Sets sourcePath of an object
3219 * @param value Value to set sourcePath to
3220 */
3221 setSourcePath(value: string): Object;
3222 // functions from object svg export mixin
3223 // -----------------------------------------------------------------------------------------------------------------------------------
3224 /**
3225 * Returns styles-string for svg-export
3226 * @param {Boolean} skipShadow a boolean to skip shadow filter output
3227 * @return {String}
3228 */
3229 getSvgStyles(skipShadow?: boolean): string;
3230 /**
3231 * Returns transform-string for svg-export
3232 * @param {Boolean} use the full transform or the single object one.
3233 * @return {String}
3234 */
3235 getSvgTransform(full?: boolean, additionalTransform?: string): string;
3236 /**
3237 * Returns transform-string for svg-export from the transform matrix of single elements
3238 */
3239 getSvgTransformMatrix(): string;
3240
3241 // functions from stateful mixin
3242 // -----------------------------------------------------------------------------------------------------------------------------------
3243 /**
3244 * Returns true if object state (one of its state properties) was changed
3245 * @param {String} [propertySet] optional name for the set of property we want to save
3246 * @return {Boolean} true if instance' state has changed since `{@link fabric.Object#saveState}` was called
3247 */
3248 hasStateChanged(propertySet: string): boolean;
3249 /**
3250 * Saves state of an object
3251 * @param [options] Object with additional `stateProperties` array to include when saving state
3252 * @return thisArg
3253 */
3254 saveState(options?: { stateProperties?: any[], propertySet?: string }): Object;
3255 /**
3256 * Setups state of an object
3257 * @param {Object} [options] Object with additional `stateProperties` array to include when saving state
3258 * @return {fabric.Object} thisArg
3259 */
3260 setupState(options?: any): Object;
3261 // functions from object straightening mixin
3262 // -----------------------------------------------------------------------------------------------------------------------------------
3263 /**
3264 * Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer)
3265 */
3266 straighten(): Object;
3267 /**
3268 * Same as straighten but with animation
3269 */
3270 fxStraighten(callbacks: Callbacks): Object;
3271
3272 // functions from object stacking mixin
3273 // -----------------------------------------------------------------------------------------------------------------------------------
3274 /**
3275 * Moves an object up in stack of drawn objects
3276 * @param [intersecting] If `true`, send object in front of next upper intersecting object
3277 */
3278 bringForward(intersecting?: boolean): Object;
3279 /**
3280 * Moves an object to the top of the stack of drawn objects
3281 */
3282 bringToFront(): Object;
3283 /**
3284 * Moves an object down in stack of drawn objects
3285 * @param [intersecting] If `true`, send object behind next lower intersecting object
3286 */
3287 sendBackwards(intersecting?: boolean): Object;
3288 /**
3289 * Moves an object to the bottom of the stack of drawn objects
3290 */
3291 sendToBack(): Object;
3292 /**
3293 * Moves an object to specified level in stack of drawn objects
3294 * @param index New position of object
3295 */
3296 moveTo(index: number): Object;
3297
3298 // functions from object origin mixin
3299 // -----------------------------------------------------------------------------------------------------------------------------------
3300 /**
3301 * Translates the coordinates from origin to center coordinates (based on the object's dimensions)
3302 * @param point The point which corresponds to the originX and originY params
3303 * @param originX Horizontal origin: 'left', 'center' or 'right'
3304 * @param originY Vertical origin: 'top', 'center' or 'bottom'
3305 */
3306 translateToCenterPoint(point: Point, originX: string, originY: string): Point;
3307
3308 /**
3309 * Translates the coordinates from center to origin coordinates (based on the object's dimensions)
3310 * @param center The point which corresponds to center of the object
3311 * @param originX Horizontal origin: 'left', 'center' or 'right'
3312 * @param originY Vertical origin: 'top', 'center' or 'bottom'
3313 */
3314 translateToOriginPoint(center: Point, originX: string, originY: string): Point;
3315 /**
3316 * Returns the real center coordinates of the object
3317 */
3318 getCenterPoint(): Point;
3319
3320 /**
3321 * Returns the coordinates of the object as if it has a different origin
3322 * @param {String} originX Horizontal origin: 'left', 'center' or 'right'
3323 * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
3324 * @return {fabric.Point}
3325 */
3326 getPointByOrigin(originX: string, originY: string) : Point;
3327
3328 /**
3329 * Returns the point in local coordinates
3330 * @param point The point relative to the global coordinate system
3331 * @param originX Horizontal origin: 'left', 'center' or 'right'
3332 * @param originY Vertical origin: 'top', 'center' or 'bottom'
3333 */
3334 toLocalPoint(point: Point, originX: string, originY: string): Point;
3335
3336 /**
3337 * Sets the position of the object taking into consideration the object's origin
3338 * @param pos The new position of the object
3339 * @param originX Horizontal origin: 'left', 'center' or 'right'
3340 * @param originY Vertical origin: 'top', 'center' or 'bottom'
3341 */
3342 setPositionByOrigin(pos: Point, originX: string, originY: string): void;
3343
3344 /**
3345 * @param to One of 'left', 'center', 'right'
3346 */
3347 adjustPosition(to: string): void;
3348
3349 // functions from interactivity mixin
3350 // -----------------------------------------------------------------------------------------------------------------------------------
3351 /**
3352 * Draws borders of an object's bounding box.
3353 * Requires public properties: width, height
3354 * Requires public options: padding, borderColor
3355 * @param {CanvasRenderingContext2D} ctx Context to draw on
3356 * @param {Object} styleOverride object to override the object style
3357 * @return {fabric.Object} thisArg
3358 * @chainable
3359 */
3360 drawBorders(ctx: CanvasRenderingContext2D, styleOverride?: any): Object;
3361
3362 /**
3363 * Draws borders of an object's bounding box when it is inside a group.
3364 * Requires public properties: width, height
3365 * Requires public options: padding, borderColor
3366 * @param {CanvasRenderingContext2D} ctx Context to draw on
3367 * @param {object} options object representing current object parameters
3368 * @param {Object} styleOverride object to override the object style
3369 * @return {fabric.Object} thisArg
3370 * @chainable
3371 */
3372 drawBordersInGroup(ctx: CanvasRenderingContext2D, options?: any, styleOverride?: any): Object;
3373
3374 /**
3375 * Draws corners of an object's bounding box.
3376 * Requires public properties: width, height
3377 * Requires public options: cornerSize, padding
3378 * @param {CanvasRenderingContext2D} ctx Context to draw on
3379 * @param {Object} styleOverride object to override the object style
3380 * @return {fabric.Object} thisArg
3381 * @chainable
3382 */
3383 drawControls(ctx: CanvasRenderingContext2D, styleOverride?: any): Object;
3384
3385 /**
3386 * Draws a colored layer behind the object, inside its selection borders.
3387 * Requires public options: padding, selectionBackgroundColor
3388 * this function is called when the context is transformed
3389 * has checks to be skipped when the object is on a staticCanvas
3390 * @param {CanvasRenderingContext2D} ctx Context to draw on
3391 * @return {fabric.Object} thisArg
3392 * @chainable
3393 */
3394 drawSelectionBackground(ctx: CanvasRenderingContext2D): Object;
3395
3396 /**
3397 * Draws corners of an object's bounding box.
3398 * Requires public properties: width, height
3399 * Requires public options: cornerSize, padding
3400 * @param ctx Context to draw on
3401 */
3402 drawCorners(context: CanvasRenderingContext2D): Object;
3403
3404 /**
3405 * Returns true if the specified control is visible, false otherwise.
3406 * @param controlName The name of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'.
3407 */
3408 isControlVisible(controlName: string): boolean;
3409 /**
3410 * Sets the visibility of the specified control.
3411 * @param controlName The name of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'.
3412 * @param visible true to set the specified control visible, false otherwise
3413 */
3414 setControlVisible(controlName: string, visible: boolean): Object;
3415
3416 /**
3417 * Sets the visibility state of object controls.
3418 * @param [options] Options object
3419 */
3420 setControlsVisibility(options?: {
3421 bl?: boolean;
3422 br?: boolean;
3423 mb?: boolean;
3424 ml?: boolean;
3425 mr?: boolean;
3426 mt?: boolean;
3427 tl?: boolean;
3428 tr?: boolean;
3429 mtr?: boolean;
3430 }): this;
3431
3432 // functions from geometry mixin
3433 // -------------------------------------------------------------------------------------------------------------------------------
3434 /**
3435 * Sets corner position coordinates based on current angle, width and height.
3436 * See {@link https://github.com/kangax/fabric.js/wiki/When-to-call-setCoords|When-to-call-setCoords}
3437 * @param {Boolean} [ignoreZoom] set oCoords with or without the viewport transform.
3438 * @param {Boolean} [skipAbsolute] skip calculation of aCoords, usefull in setViewportTransform
3439 * @return {fabric.Object} thisArg
3440 * @chainable
3441 */
3442 setCoords(ignoreZoom?: boolean, skipAbsolute?: boolean): Object;
3443 /**
3444 * Returns coordinates of object's bounding rectangle (left, top, width, height)
3445 * the box is intented as aligned to axis of canvas.
3446 * @param {Boolean} [absolute] use coordinates without viewportTransform
3447 * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords / .aCoords
3448 * @return {Object} Object with left, top, width, height properties
3449 */
3450 getBoundingRect(absolute?: boolean, calculate?: boolean): { left: number; top: number; width: number; height: number };
3451 /**
3452 * Checks if object is fully contained within area of another object
3453 * @param {Object} other Object to test
3454 * @param {Boolean} [absolute] use coordinates without viewportTransform
3455 * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords
3456 * @return {Boolean} true if object is fully contained within area of another object
3457 */
3458 isContainedWithinObject(other: Object, absolute?: boolean, calculate?: boolean): boolean;
3459 /**
3460 * Checks if object is fully contained within area formed by 2 points
3461 * @param pointTL top-left point of area
3462 * @param pointBR bottom-right point of area
3463 */
3464 isContainedWithinRect(pointTL: any, pointBR: any, absolute?: boolean, calculate?: boolean): boolean;
3465 /**
3466 * Checks if point is inside the object
3467 * @param {fabric.Point} point Point to check against
3468 * @param {Object} [lines] object returned from @method _getImageLines
3469 * @param {Boolean} [absolute] use coordinates without viewportTransform
3470 * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords
3471 * @return {Boolean} true if point is inside the object
3472 */
3473 containsPoint(point: Point, lines?: any, absolute?: boolean, calculate?: boolean): boolean;
3474 /**
3475 * Scales an object (equally by x and y)
3476 * @param value Scale factor
3477 * @return thisArg
3478 */
3479 scale(value: number): Object;
3480 /**
3481 * Scales an object to a given height, with respect to bounding box (scaling by x/y equally)
3482 * @param value New height value
3483 */
3484 scaleToHeight(value: number, absolute?: boolean): Object;
3485 /**
3486 * Scales an object to a given width, with respect to bounding box (scaling by x/y equally)
3487 * @param value New width value
3488 */
3489 scaleToWidth(value: number, absolute?: boolean): Object;
3490 /**
3491 * Checks if object intersects with another object
3492 * @param {Object} other Object to test
3493 * @param {Boolean} [absolute] use coordinates without viewportTransform
3494 * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords
3495 * @return {Boolean} true if object intersects with another object
3496 */
3497 intersectsWithObject(other: Object, absolute?: boolean, calculate?: boolean): boolean;
3498 /**
3499 * Checks if object intersects with an area formed by 2 points
3500 * @param {Object} pointTL top-left point of area
3501 * @param {Object} pointBR bottom-right point of area
3502 * @param {Boolean} [absolute] use coordinates without viewportTransform
3503 * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords
3504 * @return {Boolean} true if object intersects with an area formed by 2 points
3505 */
3506 intersectsWithRect(pointTL: any, pointBR: any, absolute?: boolean, calculate?: boolean): boolean;
3507 /**
3508 * Animates object's properties
3509 */
3510 animate(): Object;
3511 /**
3512 * Calculate and returns the .coords of an object.
3513 * @return {Object} Object with tl, tr, br, bl ....
3514 * @chainable
3515 */
3516 calcCoords(absolute?: boolean): any;
3517 /**
3518 * calculate trasform Matrix that represent current transformation from
3519 * object properties.
3520 * @param {Boolean} [skipGroup] return transformMatrix for object and not go upward with parents
3521 * @return {Array} matrix Transform Matrix for the object
3522 */
3523 calcTransformMatrix(skipGroup?: boolean): any[];
3524 /**
3525 * return correct set of coordinates for intersection
3526 */
3527 getCoords(absolute?: boolean, calculate?: boolean): any;
3528 /**
3529 * Returns height of an object bounding box counting transformations
3530 * before 2.0 it was named getHeight();
3531 * @return {Number} height value
3532 */
3533 getScaledHeight(): number;
3534 /**
3535 * Returns width of an object bounding box counting transformations
3536 * before 2.0 it was named getWidth();
3537 * @return {Number} width value
3538 */
3539 getScaledWidth(): number;
3540 /**
3541 * Returns id attribute for svg output
3542 * @return {String}
3543 */
3544 getSvgCommons(): string;
3545 /**
3546 * Returns filter for svg shadow
3547 * @return {String}
3548 */
3549 getSvgFilter(): string;
3550 /**
3551 * Returns styles-string for svg-export
3552 * @param {Object} style the object from which to retrieve style properties
3553 * @param {Boolean} useWhiteSpace a boolean to include an additional attribute in the style.
3554 * @return {String}
3555 */
3556 getSvgSpanStyles(style: any, useWhiteSpace?: boolean): string;
3557 /**
3558 * Returns text-decoration property for svg-export
3559 * @param {Object} style the object from which to retrieve style properties
3560 * @return {String}
3561 */
3562 getSvgTextDecoration(style: any): string;
3563 /**
3564 * Checks if object is contained within the canvas with current viewportTransform
3565 * the check is done stopping at first point that appears on screen
3566 * @param {Boolean} [calculate] use coordinates of current position instead of .aCoords
3567 * @return {Boolean} true if object is fully or partially contained within canvas
3568 */
3569 isOnScreen(calculate?: boolean): boolean;
3570 /**
3571 * Checks if object is partially contained within the canvas with current viewportTransform
3572 * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords
3573 * @return {Boolean} true if object is partially contained within canvas
3574 */
3575 isPartiallyOnScreen(calculate?: boolean): boolean;
3576 /**
3577 * This callback function is called every time _discardActiveObject or _setActiveObject
3578 * try to to deselect this object. If the function returns true, the process is cancelled
3579 * @return {Boolean} true to cancel selection
3580 */
3581 onDeselect(options: { e?: Event, object?: Object }): boolean;
3582 /**
3583 * This callback function is called every time _discardActiveObject or _setActiveObject
3584 * try to to deselect this object. If the function returns true, the process is cancelled
3585 * @param {Object} [options] options sent from the upper functions
3586 * @param {Event} [options.e] event if the process is generated by an event
3587 */
3588 onDeselect(options: { e?: Event; object?: fabric.Object }): boolean;
3589 /**
3590 * This callback function is called every time _discardActiveObject or _setActiveObject
3591 * try to to select this object. If the function returns true, the process is cancelled
3592 */
3593 onSelect(options: { e?: Event }): boolean;
3594 /**
3595 * Returns svg clipPath representation of an instance
3596 * @param {Function} [reviver] Method for further parsing of svg representation.
3597 * @return {String} svg representation of an instance
3598 */
3599 toClipPathSVG(reviver?: Function): string;
3600 /**
3601 * Returns svg representation of an instance
3602 * @param {Function} [reviver] Method for further parsing of svg representation.
3603 * @return {String} svg representation of an instance
3604 */
3605 toSVG(reviver?: Function): string;
3606 /**
3607 * Translates the coordinates from a set of origin to another (based on the object's dimensions)
3608 * @param {fabric.Point} point The point which corresponds to the originX and originY params
3609 * @param {String} fromOriginX Horizontal origin: 'left', 'center' or 'right'
3610 * @param {String} fromOriginY Vertical origin: 'top', 'center' or 'bottom'
3611 * @param {String} toOriginX Horizontal origin: 'left', 'center' or 'right'
3612 * @param {String} toOriginY Vertical origin: 'top', 'center' or 'bottom'
3613 * @return {fabric.Point}
3614 */
3615 translateToGivenOrigin(pointL: Point, fromOriginX: string, fromOriginY: string, toOriginX: string, toOriginY: string): Point;
3616 /*
3617 * Calculate object dimensions from its properties
3618 * @private
3619 * @return {Object} .x width dimension
3620 * @return {Object} .y height dimension
3621 */
3622 _getNonTransformedDimensions(): {x: number, y: number};
3623 /**
3624 * Returns the top, left coordinates
3625 * @private
3626 * @return {fabric.Point}
3627 */
3628 _getLeftTopCoords(): Point;
3629 /*
3630 * Calculate object bounding box dimensions from its properties scale, skew.
3631 * @private
3632 * @return {Object} .x width dimension
3633 * @return {Object} .y height dimension
3634 */
3635 _getTransformedDimensions(skewX?: number, skewY?: number): { x: number, y: number };
3636
3637 /**
3638 * @private
3639 * @param {CanvasRenderingContext2D} ctx Context to render on
3640 */
3641 _renderFill(ctx: CanvasRenderingContext2D): void;
3642 /**
3643 * @param ctx
3644 * @private
3645 */
3646 _renderStroke(ctx: CanvasRenderingContext2D): void;
3647 /**
3648 * @private
3649 * @param {CanvasRenderingContext2D} ctx Context to render on
3650 */
3651 _removeShadow(ctx: CanvasRenderingContext2D): void;
3652 /**
3653 * @private
3654 * Sets line dash
3655 * @param {CanvasRenderingContext2D} ctx Context to set the dash line on
3656 * @param {Array} dashArray array representing dashes
3657 * @param {Function} alternative function to call if browser does not support lineDash
3658 */
3659 _setLineDash(ctx: CanvasRenderingContext2D, dashArray: number[], alternative?: (ctx: CanvasRenderingContext2D) => void): void;
3660 /**
3661 * @private
3662 * @param {CanvasRenderingContext2D} ctx Context to render on
3663 * @param {Object} filler fabric.Pattern or fabric.Gradient
3664 * @return {Object} offset.offsetX offset for text rendering
3665 * @return {Object} offset.offsetY offset for text rendering
3666 */
3667 _applyPatternGradientTransform(ctx: CanvasRenderingContext2D, filler: string | Pattern | Gradient): void;
3668 /**
3669 * @private
3670 * @param {CanvasRenderingContext2D} ctx Context to render on
3671 */
3672 _render(ctx: CanvasRenderingContext2D): void;
3673 /**
3674 * @private
3675 * @param {CanvasRenderingContext2D} ctx Context to render on
3676 */
3677 _renderPaintInOrder(ctx: CanvasRenderingContext2D): void;
3678 /**
3679 * Returns the instance of the control visibility set for this object.
3680 * @private
3681 * @returns {Object}
3682 */
3683 _getControlsVisibility(): { tl: boolean, tr: boolean, br: boolean, bl: boolean, ml: boolean, mt: boolean, mr: boolean, mb: boolean, mtr: boolean };
3684 /**
3685 * Creates fabric Object instance
3686 * @param {string} Class name
3687 * @param {fabric.Object} Original object
3688 * @param {Function} Callback when complete
3689 * @param {Object} Extra parameters for fabric.Object
3690 * @private
3691 * @return {fabric.Object}
3692 */
3693 static _fromObject(className: string, object: Object, callback?: Function, extraParam?: any): Object;
3694}
3695
3696interface IPathOptions extends IObjectOptions {
3697 /**
3698 * Array of path points
3699 */
3700 path?: Point[];
3701}
3702export interface Path extends Object, IPathOptions { }
3703export class Path {
3704 /**
3705 * Constructor
3706 * @param path Path data (sequence of coordinates and corresponding "command" tokens)
3707 * @param [options] Options object
3708 */
3709 constructor(path?: string | Point[], options?: IPathOptions);
3710
3711 pathOffset: Point;
3712
3713 /**
3714 * Returns svg clipPath representation of an instance
3715 * @param {Function} [reviver] Method for further parsing of svg representation.
3716 * @return {String} svg representation of an instance
3717 */
3718 toClipPathSVG(reviver?: Function): string;
3719 /**
3720 * Returns svg representation of an instance
3721 * @param [reviver] Method for further parsing of svg representation.
3722 * @return svg representation of an instance
3723 */
3724 toSVG(reviver?: Function): string;
3725 /**
3726 * Creates an instance of fabric.Path from an SVG <path> element
3727 * @param element to parse
3728 * @param callback Callback to invoke when an fabric.Path instance is created
3729 * @param [options] Options object
3730 */
3731 static fromElement(element: SVGElement, callback: Function, options?: IPathOptions): Path;
3732 /**
3733 * Creates an instance of fabric.Path from an object
3734 * @param callback Callback to invoke when an fabric.Path instance is created
3735 */
3736 static fromObject(object: any, callback: Function): Path;
3737 /**
3738 * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`)
3739 */
3740 static ATTRIBUTE_NAMES: string[];
3741}
3742export interface Polygon extends IPolylineOptions { }
3743export class Polygon extends Polyline {
3744 /**
3745 * Constructor
3746 * @param points Array of points
3747 * @param [options] Options object
3748 */
3749 constructor(points: Array<{ x: number; y: number }>, options?: IPolylineOptions);
3750 /**
3751 * Returns Polygon instance from an SVG element
3752 * @param element Element to parse
3753 * @param [options] Options object
3754 */
3755 static fromElement(element: SVGElement, options?: IPolylineOptions): Polygon;
3756 /**
3757 * Returns fabric.Polygon instance from an object representation
3758 * @param object Object to create an instance from
3759 */
3760 static fromObject(object: any): Polygon;
3761}
3762
3763interface IPolylineOptions extends IObjectOptions {
3764 /**
3765 * Points array
3766 */
3767 points?: Point[];
3768}
3769export interface Polyline extends IPolylineOptions { }
3770export class Polyline extends Object {
3771 /**
3772 * Constructor
3773 * @param points Array of points (where each point is an object with x and y)
3774 * @param [options] Options object
3775 * @param [skipOffset] Whether points offsetting should be skipped
3776 */
3777 constructor(points: Array<{ x: number; y: number }>, options?: IPolylineOptions);
3778
3779 pathOffset: Point;
3780
3781 /**
3782 * Calculate the polygon min and max point from points array,
3783 * returning an object with left, top, width, height to measure the polygon size
3784 * @private
3785 * @return {Object} object.left X coordinate of the polygon leftmost point
3786 * @return {Object} object.top Y coordinate of the polygon topmost point
3787 * @return {Object} object.width distance between X coordinates of the polygon leftmost and rightmost point
3788 * @return {Object} object.height distance between Y coordinates of the polygon topmost and bottommost point
3789 */
3790 _calcDimensions(): { left: number, top: number, width: number, height: number };
3791 /**
3792 * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`)
3793 */
3794 static ATTRIBUTE_NAMES: string[];
3795 /**
3796 * Returns Polyline instance from an SVG element
3797 * @param element Element to parse
3798 * @param [options] Options object
3799 */
3800 static fromElement(element: SVGElement, options?: IPolylineOptions): Polyline;
3801 /**
3802 * Returns fabric.Polyline instance from an object representation
3803 * @param object Object to create an instance from
3804 */
3805 static fromObject(object: any): Polyline;
3806}
3807
3808interface IRectOptions extends IObjectOptions {
3809 /**
3810 * Horizontal border radius
3811 */
3812 rx?: number;
3813
3814 /**
3815 * Vertical border radius
3816 */
3817 ry?: number;
3818}
3819
3820export interface Rect extends IRectOptions { }
3821export class Rect extends Object {
3822 /**
3823 * Constructor
3824 * @param [options] Options object
3825 */
3826 constructor(options?: IRectOptions);
3827 /**
3828 * List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`)
3829 */
3830 static ATTRIBUTE_NAMES: string[];
3831 /**
3832 * Returns Rect instance from an SVG element
3833 * @param element Element to parse
3834 * @param [options] Options object
3835 */
3836 static fromElement(element: SVGElement, options?: IRectOptions): Rect;
3837 /**
3838 * Returns Rect instance from an object representation
3839 * @param object Object to create an instance from
3840 */
3841 static fromObject(object: any): Rect;
3842}
3843
3844interface TextOptions extends IObjectOptions {
3845 type?: string;
3846 /**
3847 * Font size (in pixels)
3848 * @type Number
3849 */
3850 fontSize?: number;
3851 /**
3852 * Font weight (e.g. bold, normal, 400, 600, 800)
3853 * @type {(Number|String)}
3854 */
3855 fontWeight?: string | number;
3856 /**
3857 * Font family
3858 * @type String
3859 */
3860 fontFamily?: string;
3861 /**
3862 * Text decoration underline.
3863 * @type Boolean
3864 */
3865 underline?: boolean;
3866 /**
3867 * Text decoration overline.
3868 * @type Boolean
3869 */
3870 overline?: boolean;
3871 /**
3872 * Text decoration linethrough.
3873 * @type Boolean
3874 */
3875 linethrough?: boolean;
3876 /**
3877 * Text alignment. Possible values: "left", "center", "right", "justify",
3878 * "justify-left", "justify-center" or "justify-right".
3879 * @type String
3880 */
3881 textAlign?: string;
3882 /**
3883 * Font style . Possible values: "", "normal", "italic" or "oblique".
3884 * @type String
3885 */
3886 fontStyle?: '' | 'normal' | 'italic' | 'oblique';
3887 /**
3888 * Line height
3889 * @type Number
3890 */
3891 lineHeight?: number;
3892 /**
3893 * Superscript schema object (minimum overlap)
3894 * @type {Object}
3895 */
3896 superscript?: {size: number, baseline: number};
3897 /**
3898 * Subscript schema object (minimum overlap)
3899 * @type {Object}
3900 */
3901 subscript?: {size: number, baseline: number};
3902 /**
3903 * Background color of text lines
3904 * @type String
3905 */
3906 textBackgroundColor?: string;
3907 /**
3908 * When defined, an object is rendered via stroke and this property specifies its color.
3909 * <b>Backwards incompatibility note:</b> This property was named "strokeStyle" until v1.1.6
3910 */
3911 stroke?: string;
3912 /**
3913 * Shadow object representing shadow of this shape.
3914 * <b>Backwards incompatibility note:</b> This property was named "textShadow" (String) until v1.2.11
3915 * @type fabric.Shadow
3916 */
3917 shadow?: Shadow | string;
3918 /**
3919 * additional space between characters
3920 * expressed in thousands of em unit
3921 * @type Number
3922 */
3923 charSpacing?: number;
3924 /**
3925 * Object containing character styles - top-level properties -> line numbers,
3926 * 2nd-level properties - charater numbers
3927 * @type Object
3928 */
3929 styles?: any;
3930 /**
3931 * Baseline shift, stlyes only, keep at 0 for the main text object
3932 * @type {Number}
3933 */
3934 deltaY?: number;
3935 text?: string;
3936 /**
3937 * List of properties to consider when checking if cache needs refresh
3938 * @type Array
3939 */
3940 cacheProperties?: string[];
3941 /**
3942 * List of properties to consider when checking if
3943 * state of an object is changed ({@link fabric.Object#hasStateChanged})
3944 * as well as for history (undo/redo) purposes
3945 * @type Array
3946 */
3947 stateProperties?: string[];
3948}
3949export interface Text extends TextOptions { }
3950export class Text extends Object {
3951 /**
3952 * List of lines in text object
3953 * @type Array<string>
3954 */
3955 textLines: string[];
3956 /**
3957 * List of grapheme lines in text object
3958 * @private
3959 * @type Array<string>
3960 */
3961 _textLines: string[][];
3962 /**
3963 * List of unwrapped grapheme lines in text object
3964 * @private
3965 * @type Array<string>
3966 */
3967 _unwrappedTextLines: string[][];
3968 /**
3969 * Use this regular expression to filter for whitespaces that is not a new line.
3970 * Mostly used when text is 'justify' aligned.
3971 * @private
3972 * @type RegExp
3973 */
3974 _reSpacesAndTabs: RegExp;
3975 /**
3976 * Use this regular expression to filter for whitespace that is not a new line.
3977 * Mostly used when text is 'justify' aligned.
3978 * @private
3979 * @type RegExp
3980 */
3981 _reSpaceAndTab: RegExp;
3982 /**
3983 * List of line widths
3984 * @private
3985 * @type Array<Number>
3986 */
3987 __lineWidths: number[];
3988 /**
3989 * List of line heights
3990 * @private
3991 * @type Array<Number>
3992 */
3993 __lineHeights: number[];
3994 /**
3995 * Contains characters bounding boxes for each line and char
3996 * @private
3997 * @type Array of char grapheme bounding boxes
3998 */
3999 __charBounds?: Array<Array<{ width: number, left: number, height: number, kernedWidth: number, deltaY: number }>>;
4000 /**
4001 * Text Line proportion to font Size (in pixels)
4002 * @private
4003 * @type Number
4004 */
4005 _fontSizeMult: number;
4006 /**
4007 * @private
4008 * @type Number
4009 */
4010 _fontSizeFraction: number;
4011 /**
4012 * @private
4013 * @type boolean
4014 */
4015 __skipDimension: boolean;
4016 /**
4017 * Constructor
4018 * @param text Text string
4019 * @param [options] Options object
4020 */
4021 constructor(text: string, options?: TextOptions);
4022 /**
4023 * Return a context for measurement of text string.
4024 * if created it gets stored for reuse
4025 * @return {fabric.Text} thisArg
4026 */
4027 getMeasuringContext(): CanvasRenderingContext2D;
4028 /**
4029 * Initialize or update text dimensions.
4030 * Updates this.width and this.height with the proper values.
4031 * Does not return dimensions.
4032 */
4033 initDimensions(): void;
4034 /**
4035 * Enlarge space boxes and shift the others
4036 */
4037 enlargeSpaces(): void;
4038 /**
4039 * Detect if the text line is ended with an hard break
4040 * text and itext do not have wrapping, return false
4041 * @return {Boolean}
4042 */
4043 isEndOfWrapping(lineIndex: number): boolean;
4044 /**
4045 * Returns string representation of an instance
4046 */
4047 toString(): string;
4048 /**
4049 * Computes height of character at given position
4050 * @param {Number} line the line number
4051 * @param {Number} char the character number
4052 * @return {Number} fontSize of the character
4053 */
4054 getHeightOfChar(line: number, char: number): number;
4055 /**
4056 * measure a text line measuring all characters.
4057 * @param {Number} lineIndex line number
4058 * @return {Object} object.width total width of characters
4059 * @return {Object} object.numOfSpaces length of chars that match this._reSpacesAndTabs
4060 */
4061 measureLine(lineIndex: number): { width: number, numOfSpaces: number };
4062 /**
4063 * Calculate height of line at 'lineIndex'
4064 * @param {Number} lineIndex index of line to calculate
4065 * @return {Number}
4066 */
4067 getHeightOfLine(lineIndex: number): number;
4068 /**
4069 * Calculate text box height
4070 */
4071 calcTextHeight(): number;
4072 /**
4073 * Turns the character into a 'superior figure' (i.e. 'superscript')
4074 * @param {Number} start selection start
4075 * @param {Number} end selection end
4076 * @returns {fabric.Text} thisArg
4077 * @chainable
4078 */
4079 setSuperscript(start: number, end: number): Text;
4080 /**
4081 * Turns the character into an 'inferior figure' (i.e. 'subscript')
4082 * @param {Number} start selection start
4083 * @param {Number} end selection end
4084 * @returns {fabric.Text} thisArg
4085 * @chainable
4086 */
4087 setSubscript(start: number, end: number): Text;
4088 /**
4089 * Retrieves the value of property at given character position
4090 * @param {Number} lineIndex the line number
4091 * @param {Number} charIndex the charater number
4092 * @param {String} property the property name
4093 * @returns the value of 'property'
4094 */
4095 getValueOfPropertyAt(lineIndex: number, charIndex: number, property: string): any;
4096 static DEFAULT_SVG_FONT_SIZE: number;
4097 /**
4098 * Returns fabric.Text instance from an SVG element (<b>not yet implemented</b>)
4099 * @static
4100 * @memberOf fabric.Text
4101 * @param {SVGElement} element Element to parse
4102 * @param {Function} callback callback function invoked after parsing
4103 * @param {Object} [options] Options object
4104 */
4105 static fromElement(element: SVGElement, callback?: Function, options?: TextOptions): Text;
4106 /**
4107 * Returns fabric.Text instance from an object representation
4108 * @static
4109 * @memberOf fabric.Text
4110 * @param {Object} object Object to create an instance from
4111 * @param {Function} [callback] Callback to invoke when an fabric.Text instance is created
4112 */
4113 static fromObject(object: any, callback?: Function): Text;
4114 /**
4115 * Check if characters in a text have a value for a property
4116 * whose value matches the textbox's value for that property. If so,
4117 * the character-level property is deleted. If the character
4118 * has no other properties, then it is also deleted. Finally,
4119 * if the line containing that character has no other characters
4120 * then it also is deleted.
4121 *
4122 * @param {string} property The property to compare between characters and text.
4123 */
4124 cleanStyle(property: string): void;
4125 /**
4126 * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start)
4127 * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used.
4128 * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. usefull to manage styles.
4129 */
4130 get2DCursorLocation(selectionStart: number, skipWrapping: boolean): {lineIndex: number, charIndex: number};
4131 /**
4132 * return a new object that contains all the style property for a character
4133 * the object returned is newly created
4134 * @param {Number} lineIndex of the line where the character is
4135 * @param {Number} charIndex position of the character on the line
4136 * @return {Object} style object
4137 */
4138 getCompleteStyleDeclaration(lineIndex: number, charIndex: number): any;
4139 /**
4140 * Gets style of a current selection/cursor (at the start position)
4141 * if startIndex or endIndex are not provided, slectionStart or selectionEnd will be used.
4142 * @param {Number} [startIndex] Start index to get styles at
4143 * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1
4144 * @param {Boolean} [complete] get full style or not
4145 * @return {Array} styles an array with one, zero or more Style objects
4146 */
4147 getSelectionStyles(startIndex?: number, endIndex?: number, complete?: boolean): any[];
4148 /**
4149 * Returns styles-string for svg-export
4150 * @param {Boolean} skipShadow a boolean to skip shadow filter output
4151 * @return {String}
4152 */
4153 getSvgStyles(skipShadow?: boolean): string;
4154 /**
4155 * Returns true if object has no styling or no styling in a line
4156 * @param {Number} lineIndex , lineIndex is on wrapped lines.
4157 * @return {Boolean}
4158 */
4159 isEmptyStyles(lineIndex: number): boolean;
4160 /**
4161 * Remove a style property or properties from all individual character styles
4162 * in a text object. Deletes the character style object if it contains no other style
4163 * props. Deletes a line style object if it contains no other character styles.
4164 *
4165 * @param {String} props The property to remove from character styles.
4166 */
4167 removeStyle(property: string): void;
4168 /**
4169 * Sets style of a current selection, if no selection exist, do not set anything.
4170 * @param {Object} [styles] Styles object
4171 * @param {Number} [startIndex] Start index to get styles at
4172 * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1
4173 * @return {fabric.IText} thisArg
4174 * @chainable
4175 */
4176 setSelectionStyles(styles: any, startIndex?: number, endIndex?: number): Text;
4177 /**
4178 * Returns true if object has a style property or has it ina specified line
4179 * @param {Number} lineIndex
4180 * @return {Boolean}
4181 */
4182 styleHas(property: string, lineIndex?: number): boolean;
4183 /**
4184 * Measure a single line given its index. Used to calculate the initial
4185 * text bounding box. The values are calculated and stored in __lineWidths cache.
4186 * @private
4187 * @param {Number} lineIndex line number
4188 * @return {Number} Line width
4189 */
4190 getLineWidth(lineIndex: number): number;
4191 /**
4192 * @private
4193 * @param {Number} lineIndex index text line
4194 * @return {Number} Line left offset
4195 */
4196 _getLineLeftOffset(lineIndex: number): number;
4197 /**
4198 * apply all the character style to canvas for rendering
4199 * @private
4200 * @param {String} _char
4201 * @param {CanvasRenderingContext2D} ctx Context to render on
4202 * @param {Number} lineIndex
4203 * @param {Number} charIndex
4204 * @param {Object} [decl]
4205 */
4206 _applyCharStyles(method: string, ctx: CanvasRenderingContext2D, lineIndex: number, charIndex: number, styleDeclaration: any): void;
4207 /**
4208 * get the reference, not a clone, of the style object for a given character
4209 * @param {Number} lineIndex
4210 * @param {Number} charIndex
4211 * @return {Object} style object
4212 */
4213 _getStyleDeclaration(lineIndex: number, charIndex: number): any;
4214 /**
4215 * Generate an object that translates the style object so that it is
4216 * broken up by visual lines (new lines and automatic wrapping).
4217 * The original text styles object is broken up by actual lines (new lines only),
4218 * which is only sufficient for Text / IText
4219 * @private
4220 */
4221 _generateStyleMap(textInfo: { _unwrappedLines: string[], lines: string[], graphemeText: string[], graphemeLines: string[] }): Array<{ line: number; offset: number }>;
4222 /**
4223 * @private
4224 * Gets the width of character spacing
4225 */
4226 _getWidthOfCharSpacing(): number;
4227 /**
4228 * measure and return the width of a single character.
4229 * possibly overridden to accommodate different measure logic or
4230 * to hook some external lib for character measurement
4231 * @private
4232 * @param {String} char to be measured
4233 * @param {Object} charStyle style of char to be measured
4234 * @param {String} [previousChar] previous char
4235 * @param {Object} [prevCharStyle] style of previous char
4236 * @return {Object} object contained char width anf kerned width
4237 */
4238 _measureChar(_char: string, charStyle: any, previousChar: string, prevCharStyle: any): { width: number, kernedWidth: number };
4239 /**
4240 * @private
4241 * @param {String} method
4242 * @param {CanvasRenderingContext2D} ctx Context to render on
4243 * @param {String} line Content of the line
4244 * @param {Number} left
4245 * @param {Number} top
4246 * @param {Number} lineIndex
4247 * @param {Number} charOffset
4248 */
4249 _renderChars(method: string, ctx: CanvasRenderingContext2D, line: string, left: number, top: number, lineIndex: number): void;
4250 /**
4251 * @private
4252 * @param {String} method
4253 * @param {CanvasRenderingContext2D} ctx Context to render on
4254 * @param {Number} lineIndex
4255 * @param {Number} charIndex
4256 * @param {String} _char
4257 * @param {Number} left Left coordinate
4258 * @param {Number} top Top coordinate
4259 * @param {Number} lineHeight Height of the line
4260 */
4261 _renderChar(method: string, ctx: CanvasRenderingContext2D, lineIndex: number, charIndex: number, _char: string, left: number, top: number): void;
4262 /**
4263 * @private
4264 * @param {String} method Method name ("fillText" or "strokeText")
4265 * @param {CanvasRenderingContext2D} ctx Context to render on
4266 * @param {Array} line Text to render
4267 * @param {Number} left Left position of text
4268 * @param {Number} top Top position of text
4269 * @param {Number} lineIndex Index of a line in a text
4270 */
4271 _renderTextLine(method: string, ctx: CanvasRenderingContext2D, line: string[], left: number, top: number, lineIndex: number): void;
4272 /**
4273 * @private
4274 */
4275 _clearCache(): void;
4276 /**
4277 * Divides text into lines of text and lines of graphemes.
4278 * @private
4279 * @returns {Object} Lines and text in the text
4280 */
4281 _splitText(): { _unwrappedLines: string[], lines: string[], graphemeText: string[], graphemeLines: string[] };
4282 /**
4283 * @private
4284 * @param {Object} prevStyle
4285 * @param {Object} thisStyle
4286 */
4287 _hasStyleChanged(prevStyle: any, thisStyle: any): boolean;
4288}
4289interface ITextOptions extends TextOptions {
4290 /**
4291 * Index where text selection starts (or where cursor is when there is no selection)
4292 * @type Number
4293 */
4294 selectionStart?: number;
4295 /**
4296 * Index where text selection ends
4297 * @type Number
4298 */
4299 selectionEnd?: number;
4300 /**
4301 * Color of text selection
4302 * @type String
4303 */
4304 selectionColor?: string;
4305 /**
4306 * Indicates whether text is selected
4307 * @type Boolean
4308 */
4309 selected?: boolean;
4310 /**
4311 * Indicates whether text is in editing mode
4312 * @type Boolean
4313 */
4314 isEditing?: boolean;
4315 /**
4316 * Indicates whether a text can be edited
4317 * @type Boolean
4318 */
4319 editable?: boolean;
4320 /**
4321 * Border color of text object while it's in editing mode
4322 * @type String
4323 */
4324 editingBorderColor?: string;
4325 /**
4326 * Width of cursor (in px)
4327 * @type Number
4328 */
4329 cursorWidth?: number;
4330 /**
4331 * Color of default cursor (when not overwritten by character style)
4332 * @type String
4333 */
4334 cursorColor?: string;
4335 /**
4336 * Delay between cursor blink (in ms)
4337 * @type Number
4338 */
4339 cursorDelay?: number;
4340 /**
4341 * Duration of cursor fadein (in ms)
4342 * @type Number
4343 */
4344 cursorDuration?: number;
4345 /**
4346 * Indicates whether internal text char widths can be cached
4347 * @type Boolean
4348 */
4349 caching?: boolean;
4350 /**
4351 * Helps determining when the text is in composition, so that the cursor
4352 * rendering is altered.
4353 */
4354 inCompositionMode?: boolean;
4355 path?: string;
4356 useNative?: boolean;
4357 /**
4358 * For functionalities on keyDown + ctrl || cmd
4359 */
4360 ctrlKeysMapDown?: any;
4361 /**
4362 * For functionalities on keyUp + ctrl || cmd
4363 */
4364 ctrlKeysMapUp?: any;
4365 /**
4366 * For functionalities on keyDown
4367 * Map a special key to a function of the instance/prototype
4368 * If you need different behaviour for ESC or TAB or arrows, you have to change
4369 * this map setting the name of a function that you build on the fabric.Itext or
4370 * your prototype.
4371 * the map change will affect all Instances unless you need for only some text Instances
4372 * in that case you have to clone this object and assign your Instance.
4373 * this.keysMap = fabric.util.object.clone(this.keysMap);
4374 * The function must be in fabric.Itext.prototype.myFunction And will receive event as args[0]
4375 */
4376 keysMap?: any;
4377 /**
4378 * Exposes underlying hidden text area
4379 */
4380 hiddenTextarea?: HTMLTextAreaElement;
4381}
4382export interface IText extends ITextOptions { }
4383export class IText extends Text {
4384 /**
4385 * Constructor
4386 * @param text Text string
4387 * @param [options] Options object
4388 */
4389 constructor(text: string, options?: ITextOptions);
4390 /**
4391 * Sets selection start (left boundary of a selection)
4392 * @param {Number} index Index to set selection start to
4393 */
4394 setSelectionStart(index: number): void;
4395 /**
4396 * Sets selection end (right boundary of a selection)
4397 * @param {Number} index Index to set selection end to
4398 */
4399 setSelectionEnd(index: number): void;
4400 /**
4401 * Prepare and clean the contextTop
4402 */
4403 clearContextTop(skipRestore?: boolean): void;
4404 /**
4405 * Renders cursor or selection (depending on what exists)
4406 */
4407 renderCursorOrSelection(): void;
4408 /**
4409 * Renders cursor
4410 * @param {Object} boundaries
4411 * @param {CanvasRenderingContext2D} ctx transformed context to draw on
4412 */
4413 renderCursor(boundaries: any, ctx: CanvasRenderingContext2D): void;
4414 /**
4415 * Renders text selection
4416 * @param {Object} boundaries Object with left/top/leftOffset/topOffset
4417 * @param {CanvasRenderingContext2D} ctx transformed context to draw on
4418 */
4419 renderSelection(boundaries: any, ctx: CanvasRenderingContext2D): void;
4420 /**
4421 * High level function to know the height of the cursor.
4422 * the currentChar is the one that precedes the cursor
4423 * Returns fontSize of char at the current cursor
4424 * @return {Number} Character font size
4425 */
4426 getCurrentCharFontSize(): number;
4427 /**
4428 * High level function to know the color of the cursor.
4429 * the currentChar is the one that precedes the cursor
4430 * Returns color (fill) of char at the current cursor
4431 * @return {String} Character color (fill)
4432 */
4433 getCurrentCharColor(): string;
4434 /**
4435 * Returns fabric.IText instance from an object representation
4436 * @static
4437 * @memberOf fabric.IText
4438 * @param {Object} object Object to create an instance from
4439 * @param {function} [callback] invoked with new instance as argument
4440 */
4441 static fromObject(object: any, callback?: Function): IText;
4442 /**
4443 * Initializes all the interactive behavior of IText
4444 */
4445 initBehavior(): void;
4446 /**
4447 * Initializes "added" event handler
4448 */
4449 initAddedHandler(): void;
4450 /**
4451 * Initializes delayed cursor
4452 */
4453 initDelayedCursor(): void;
4454 /**
4455 * Aborts cursor animation and clears all timeouts
4456 */
4457 abortCursorAnimation(): void;
4458 /**
4459 * Selects entire text
4460 * @return {fabric.IText} thisArg
4461 * @chainable
4462 */
4463 selectAll(): IText;
4464 /**
4465 * Returns selected text
4466 * @return {String}
4467 */
4468 getSelectedText(): string;
4469 /**
4470 * Find new selection index representing start of current word according to current selection index
4471 * @param {Number} startFrom Surrent selection index
4472 * @return {Number} New selection index
4473 */
4474 findWordBoundaryLeft(startFrom: number): number;
4475 /**
4476 * Find new selection index representing end of current word according to current selection index
4477 * @param {Number} startFrom Current selection index
4478 * @return {Number} New selection index
4479 */
4480 findWordBoundaryRight(startFrom: number): number;
4481 /**
4482 * Find new selection index representing start of current line according to current selection index
4483 * @param {Number} startFrom Current selection index
4484 * @return {Number} New selection index
4485 */
4486 findLineBoundaryLeft(startFrom: number): number;
4487 /**
4488 * Find new selection index representing end of current line according to current selection index
4489 * @param {Number} startFrom Current selection index
4490 * @return {Number} New selection index
4491 */
4492 findLineBoundaryRight(startFrom: number): number;
4493 /**
4494 * Finds index corresponding to beginning or end of a word
4495 * @param {Number} selectionStart Index of a character
4496 * @param {Number} direction 1 or -1
4497 * @return {Number} Index of the beginning or end of a word
4498 */
4499 searchWordBoundary(selectionStart: number, direction: number): number;
4500 /**
4501 * Selects a word based on the index
4502 * @param {Number} selectionStart Index of a character
4503 */
4504 selectWord(selectionStart: number): void;
4505 /**
4506 * Selects a line based on the index
4507 * @param {Number} selectionStart Index of a character
4508 * @return {fabric.IText} thisArg
4509 * @chainable
4510 */
4511 selectLine(selectionStart: number): IText;
4512 /**
4513 * Enters editing state
4514 * @return {fabric.IText} thisArg
4515 * @chainable
4516 */
4517 enterEditing(e?: MouseEvent): IText;
4518 /**
4519 * Initializes "mousemove" event handler
4520 */
4521 initMouseMoveHandler(): void;
4522 /**
4523 * Exits from editing state
4524 * @return {fabric.IText} thisArg
4525 * @chainable
4526 */
4527 exitEditing(): IText;
4528 /**
4529 * remove and reflow a style block from start to end.
4530 * @param {Number} start linear start position for removal (included in removal)
4531 * @param {Number} end linear end position for removal ( excluded from removal )
4532 */
4533 removeStyleFromTo(start: number, end: number): void;
4534 /**
4535 * Shifts line styles up or down
4536 * @param {Number} lineIndex Index of a line
4537 * @param {Number} offset Can any number?
4538 */
4539 shiftLineStyles(lineIndex: number, offset: number): void;
4540 /**
4541 * Inserts new style object
4542 * @param {Number} lineIndex Index of a line
4543 * @param {Number} charIndex Index of a char
4544 * @param {Number} qty number of lines to add
4545 * @param {Array} copiedStyle Array of objects styles
4546 */
4547 insertNewlineStyleObject(lineIndex: number, charIndex: number, qty: number, copiedStyle: any[]): void;
4548 /**
4549 * Inserts style object for a given line/char index
4550 * @param {Number} lineIndex Index of a line
4551 * @param {Number} charIndex Index of a char
4552 * @param {Number} quantity number Style object to insert, if given
4553 * @param {Array} copiedStyle array of style objecs
4554 */
4555 insertCharStyleObject(lineIndex: number, charIndex: number, quantity: number, copiedStyle: any[]): void;
4556 /**
4557 * Inserts style object(s)
4558 * @param {Array} insertedText Characters at the location where style is inserted
4559 * @param {Number} start cursor index for inserting style
4560 * @param {Array} [copiedStyle] array of style objects to insert.
4561 */
4562 insertNewStyleBlock(insertedText: any[], start: number, copiedStyle?: any[]): void;
4563 /**
4564 * Set the selectionStart and selectionEnd according to the ne postion of cursor
4565 * mimic the key - mouse navigation when shift is pressed.
4566 */
4567 setSelectionStartEndWithShift(start: number, end: number, newSelection: number): void;
4568 /**
4569 * Copies selected text
4570 */
4571 copy(): void;
4572 /**
4573 * convert from fabric to textarea values
4574 */
4575 fromGraphemeToStringSelection(start: number, end: number, _text: string): {selectionStart: string, selectionEnd: string};
4576 /**
4577 * convert from textarea to grapheme indexes
4578 */
4579 fromStringToGraphemeSelection(start: number, end: number, text: string): {selectionStart: string, selectionEnd: string};
4580 /**
4581 * Gets start offset of a selection
4582 * @param {Event} e Event object
4583 * @param {Boolean} isRight
4584 * @return {Number}
4585 */
4586 getDownCursorOffset(e: Event, isRight?: boolean): number;
4587 /**
4588 * Returns index of a character corresponding to where an object was clicked
4589 * @param {Event} e Event object
4590 * @return {Number} Index of a character
4591 */
4592 getSelectionStartFromPointer(e: Event): number;
4593 /**
4594 * @param {Event} e Event object
4595 * @param {Boolean} isRight
4596 * @return {Number}
4597 */
4598 getUpCursorOffset(e: Event, isRight?: boolean): number;
4599 /**
4600 * Initializes double and triple click event handlers
4601 */
4602 initClicks(): void;
4603 /**
4604 * Initializes event handlers related to cursor or selection
4605 */
4606 initCursorSelectionHandlers(): void
4607 /**
4608 * Initializes "dbclick" event handler
4609 */
4610 initDoubleClickSimulation(): void;
4611 /**
4612 * Initializes hidden textarea (needed to bring up keyboard in iOS)
4613 */
4614 initHiddenTextarea(): void;
4615 /**
4616 * Initializes "mousedown" event handler
4617 */
4618 initMousedownHandler(): void;
4619 /**
4620 * Initializes "mouseup" event handler
4621 */
4622 initMouseupHandler(): void;
4623 /**
4624 * insert characters at start position, before start position.
4625 * start equal 1 it means the text get inserted between actual grapheme 0 and 1
4626 * if style array is provided, it must be as the same length of text in graphemes
4627 * if end is provided and is bigger than start, old text is replaced.
4628 * start/end ar per grapheme position in _text array.
4629 *
4630 * @param {String} text text to insert
4631 * @param {Array} style array of style objects
4632 * @param {Number} start
4633 * @param {Number} end default to start + 1
4634 */
4635 insertChars(text: string, style: any[], start: number, end: number): void;
4636 /**
4637 * Moves cursor down
4638 * @param {Event} e Event object
4639 */
4640 moveCursorDown(e: Event): void;
4641 /**
4642 * Moves cursor left
4643 * @param {Event} e Event object
4644 */
4645 moveCursorLeft(e: Event): void;
4646 /**
4647 * Moves cursor left without keeping selection
4648 * @param {Event} e
4649 */
4650 moveCursorLeftWithoutShift(e: Event): void;
4651 /**
4652 * Moves cursor left while keeping selection
4653 * @param {Event} e
4654 */
4655 moveCursorLeftWithShift(e: Event): void;
4656 /**
4657 * Moves cursor right
4658 * @param {Event} e Event object
4659 */
4660 moveCursorRight(e: Event): void;
4661 /**
4662 * Moves cursor right without keeping selection
4663 * @param {Event} e Event object
4664 */
4665 moveCursorRightWithoutShift(e: Event): void;
4666 /**
4667 * Moves cursor right while keeping selection
4668 * @param {Event} e
4669 */
4670 moveCursorRightWithShift(e: Event): void;
4671 /**
4672 * Moves cursor up
4673 * @param {Event} e Event object
4674 */
4675 moveCursorUp(e: Event): void;
4676 /**
4677 * Moves cursor up without shift
4678 * @param {Number} offset
4679 */
4680 moveCursorWithoutShift(offset: number): void;
4681 /**
4682 * Moves cursor with shift
4683 * @param {Number} offset
4684 */
4685 moveCursorWithShift(offset: number): void;
4686 /**
4687 * Composition end
4688 */
4689 onCompositionEnd(): void;
4690 /**
4691 * Composition start
4692 */
4693 onCompositionStart(): void;
4694 /**
4695 * Handles onInput event
4696 * @param {Event} e Event object
4697 */
4698 onInput(e: Event): void;
4699 /**
4700 * Handles keyup event
4701 * @param {Event} e Event object
4702 */
4703 onKeyDown(e: Event): void;
4704 /**
4705 * Handles keyup event
4706 * We handle KeyUp because ie11 and edge have difficulties copy/pasting
4707 * if a copy/cut event fired, keyup is dismissed
4708 * @param {Event} e Event object
4709 */
4710 onKeyUp(e: Event): void;
4711 /**
4712 * Pastes text
4713 */
4714 paste(): void;
4715 /**
4716 * Removes characters from start/end
4717 * start/end ar per grapheme position in _text array.
4718 *
4719 * @param {Number} start
4720 * @param {Number} end default to start + 1
4721 */
4722 removeChars(start: number, end: number): void;
4723 /**
4724 * Changes cursor location in a text depending on passed pointer (x/y) object
4725 * @param {Event} e Event object
4726 */
4727 setCursorByClick(e: Event): void;
4728 /**
4729 * @private
4730 */
4731 _getNewSelectionStartFromOffset(mouseOffset: {x: number, y: number}, prevWidth: number, width: number, index: number, jlen: number): number;
4732 /**
4733 * @private
4734 * @param {CanvasRenderingContext2D} ctx Context to render on
4735 */
4736 _render(ctx: CanvasRenderingContext2D): void;
4737 /**
4738 * @private
4739 */
4740 _updateTextarea(): void;
4741 /**
4742 * Default event handler for the basic functionalities needed on _mouseDown
4743 * can be overridden to do something different.
4744 * Scope of this implementation is: find the click position, set selectionStart
4745 * find selectionEnd, initialize the drawing of either cursor or selection area
4746 * @private
4747 * @param {Object} Options (seems to have an event `e` parameter
4748 */
4749 _mouseDownHandler(options: any): void;
4750}
4751interface ITextboxOptions extends ITextOptions {
4752 /**
4753 * Minimum width of textbox, in pixels.
4754 * @type Number
4755 */
4756 minWidth?: number;
4757 /**
4758 * Minimum calculated width of a textbox, in pixels.
4759 * fixed to 2 so that an empty textbox cannot go to 0
4760 * and is still selectable without text.
4761 * @type Number
4762 */
4763 dynamicMinWidth?: number;
4764 /**
4765 * Override standard Object class values
4766 */
4767 lockScalingFlip?: boolean;
4768 /**
4769 * Override standard Object class values
4770 * Textbox needs this on false
4771 */
4772 noScaleCache?: boolean;
4773 /**
4774 * Use this boolean property in order to split strings that have no white space concept.
4775 * this is a cheap way to help with chinese/japaense
4776 * @type Boolean
4777 * @since 2.6.0
4778 */
4779 splitByGrapheme?: boolean;
4780 /**
4781 * Is the text wrapping
4782 * @type Boolean
4783 */
4784 isWrapping?: boolean;
4785}
4786export interface Textbox extends ITextboxOptions{}
4787export class Textbox extends IText {
4788 /**
4789 * Constructor
4790 * @param text Text string
4791 * @param [options] Options object
4792 */
4793 constructor(text: string, options?: ITextboxOptions);
4794 /**
4795 * Returns true if object has a style property or has it ina specified line
4796 * @param {Number} lineIndex
4797 * @return {Boolean}
4798 */
4799 styleHas(property: string, lineIndex: number): boolean;
4800 /**
4801 * Returns true if object has no styling or no styling in a line
4802 * @param {Number} lineIndex , lineIndex is on wrapped lines.
4803 * @return {Boolean}
4804 */
4805 isEmptyStyles(lineIndex: number): boolean;
4806 /**
4807 * Detect if the text line is ended with an hard break
4808 * text and itext do not have wrapping, return false
4809 * @param {Number} lineIndex text to split
4810 * @return {Boolean}
4811 */
4812 isEndOfWrapping(lineIndex: number): boolean;
4813 /**
4814 * Returns larger of min width and dynamic min width
4815 * @return {Number}
4816 */
4817 getMinWidth(): number;
4818 /**
4819 * Use this regular expression to split strings in breakable lines
4820 * @private
4821 * @type RegExp
4822 */
4823 _wordJoiners: RegExp;
4824 /**
4825 * Helper function to measure a string of text, given its lineIndex and charIndex offset
4826 * it gets called when charBounds are not available yet.
4827 * @private
4828 * @param {Array} text characters
4829 * @param {number} lineIndex
4830 * @param {number} charOffset
4831 * @returns {number}
4832 */
4833 _measureWord(word: string[], lineIndex: number, charOffset: number): number;
4834 /**
4835 * Wraps text using the 'width' property of Textbox. First this function
4836 * splits text on newlines, so we preserve newlines entered by the user.
4837 * Then it wraps each line using the width of the Textbox by calling
4838 * _wrapLine().
4839 * @param {Array} lines The string array of text that is split into lines
4840 * @param {Number} desiredWidth width you want to wrap to
4841 * @returns {Array} Array of grapheme lines
4842 */
4843 _wrapText(lines: string[], desiredWidth: number): string[][];
4844 /**
4845 * Style objects for each line
4846 * Generate an object that translates the style object so that it is
4847 * broken up by visual lines (new lines and automatic wrapping).
4848 * The original text styles object is broken up by actual lines (new lines only),
4849 * which is only sufficient for Text / IText
4850 * @private
4851 * @type {Array} Line style { line: number, offset: number }
4852 */
4853 _styleMap?: Array<{ line: number, offset: number }>;
4854 /**
4855 * Returns fabric.Textbox instance from an object representation
4856 * @static
4857 * @memberOf fabric.Textbox
4858 * @param {Object} object Object to create an instance from
4859 * @param {Function} [callback] Callback to invoke when an fabric.Textbox instance is created
4860 */
4861 static fromObject(object: any, callback?: Function): Textbox;
4862}
4863interface ITriangleOptions extends IObjectOptions { }
4864export class Triangle extends Object {
4865 /**
4866 * Constructor
4867 * @param [options] Options object
4868 */
4869 constructor(options?: ITriangleOptions);
4870 /**
4871 * Returns SVG representation of an instance
4872 * @param [reviver] Method for further parsing of svg representation.
4873 * @return svg representation of an instance
4874 */
4875 toSVG(reviver?: Function): string;
4876 /**
4877 * Returns Triangle instance from an object representation
4878 * @param object Object to create an instance from
4879 */
4880 static fromObject(object: any): Triangle;
4881}
4882
4883////////////////////////////////////////////////////////////
4884// Filters
4885////////////////////////////////////////////////////////////
4886interface IAllFilters {
4887 BaseFilter: {
4888 /**
4889 * Constructor
4890 * @param [options] Options object
4891 */
4892 new(options?: any): IBaseFilter;
4893 };
4894 BlendColor: {
4895 /**
4896 * Constructor
4897 * @param [options] Options object
4898 */
4899 new(options?: { color?: string; mode?: string; alpha?: number; }): IBlendColorFilter;
4900 /**
4901 * Returns filter instance from an object representation
4902 * @param object Object to create an instance from
4903 */
4904 fromObject(object: any): IBlendColorFilter
4905 };
4906 BlendImage: {
4907 /**
4908 * Constructor
4909 * @param [options] Options object
4910 */
4911 new(options?: { image?: Image; mode?: string; alpha?: number; }): IBlendImageFilter;
4912 /**
4913 * Returns filter instance from an object representation
4914 * @param object Object to create an instance from
4915 */
4916 fromObject(object: any): IBlendImageFilter
4917 };
4918 Brightness: {
4919 new(options?: {
4920 /**
4921 * Value to brighten the image up (0..255)
4922 * @default 0
4923 */
4924 brightness: number
4925 }): IBrightnessFilter;
4926 /**
4927 * Returns filter instance from an object representation
4928 * @param object Object to create an instance from
4929 */
4930 fromObject(object: any): IBrightnessFilter
4931 };
4932 ColorMatrix: {
4933 new(options?: {
4934 /** Filter matrix */
4935 matrix?: number[]
4936 }): IColorMatrix;
4937 /**
4938 * Returns filter instance from an object representation
4939 * @param object Object to create an instance from
4940 */
4941 fromObject(object: any): IColorMatrix
4942 };
4943 Contrast: {
4944 /**
4945 * Constructor
4946 * @param [options] Options object
4947 */
4948 new(options?: { contrast?: number; }): IContrastFilter;
4949 /**
4950 * Returns filter instance from an object representation
4951 * @param object Object to create an instance from
4952 */
4953 fromObject(object: any): IContrastFilter
4954 };
4955 Convolute: {
4956 new(options?: {
4957 opaque?: boolean,
4958 /** Filter matrix */
4959 matrix?: number[],
4960 }): IConvoluteFilter;
4961 /**
4962 * Returns filter instance from an object representation
4963 * @param object Object to create an instance from
4964 */
4965 fromObject(object: any): IConvoluteFilter
4966 };
4967 GradientTransparency: {
4968 new(options?: {
4969 /** @default 100 */
4970 threshold?: number;
4971 }): IGradientTransparencyFilter;
4972 /**
4973 * Returns filter instance from an object representation
4974 * @param object Object to create an instance from
4975 */
4976 fromObject(object: any): IGradientTransparencyFilter
4977 };
4978 Grayscale: {
4979 new(options?: any): IGrayscaleFilter;
4980 /**
4981 * Returns filter instance from an object representation
4982 * @param object Object to create an instance from
4983 */
4984 fromObject(object: any): IGrayscaleFilter
4985 };
4986 Invert: {
4987 /**
4988 * Constructor
4989 * @param [options] Options object
4990 */
4991 new(options?: any): IInvertFilter;
4992 /**
4993 * Returns filter instance from an object representation
4994 * @param object Object to create an instance from
4995 */
4996 fromObject(object: any): IInvertFilter
4997 };
4998 Mask: {
4999 new(options?: {
5000 /** Mask image object */
5001 mask?: Image,
5002 /**
5003 * Rgb channel (0, 1, 2 or 3)
5004 * @default 0
5005 */
5006 channel: number,
5007 }): IMaskFilter;
5008 /**
5009 * Returns filter instance from an object representation
5010 * @param object Object to create an instance from
5011 */
5012 fromObject(object: any): IMaskFilter
5013 };
5014 Multiply: {
5015 new(options?: {
5016 /**
5017 * Color to multiply the image pixels with
5018 * @default #000000
5019 */
5020 color: string;
5021 }): IMultiplyFilter;
5022 /**
5023 * Returns filter instance from an object representation
5024 * @param object Object to create an instance from
5025 */
5026 fromObject(object: any): IMultiplyFilter
5027 };
5028 Noise: {
5029 new(options?: {
5030 /** @default 0 */
5031 noise: number,
5032 }): INoiseFilter;
5033 /**
5034 * Returns filter instance from an object representation
5035 * @param object Object to create an instance from
5036 */
5037 fromObject(object: any): INoiseFilter
5038 };
5039 Pixelate: {
5040 new(options?: {
5041 /**
5042 * Blocksize for pixelate
5043 * @default 4
5044 */
5045 blocksize?: number,
5046 }): IPixelateFilter;
5047 /**
5048 * Returns filter instance from an object representation
5049 * @param object Object to create an instance from
5050 */
5051 fromObject(object: any): IPixelateFilter
5052 };
5053 RemoveWhite: {
5054 new(options?: {
5055 /** @default 30 */
5056 threshold?: number,
5057 /** @default 20 */
5058 distance?: number,
5059 }): IRemoveWhiteFilter;
5060 /**
5061 * Returns filter instance from an object representation
5062 * @param object Object to create an instance from
5063 */
5064 fromObject(object: any): IRemoveWhiteFilter
5065 };
5066 Resize: {
5067 new(options?: any): IResizeFilter;
5068 /**
5069 * Returns filter instance from an object representation
5070 * @param object Object to create an instance from
5071 */
5072 fromObject(object: any): IResizeFilter
5073 };
5074 Saturation: {
5075 /**
5076 * Constructor
5077 * @param [options] Options object
5078 */
5079 new(options?: { saturation?: number; }): ISaturationFilter;
5080 /**
5081 * Returns filter instance from an object representation
5082 * @param object Object to create an instance from
5083 */
5084 fromObject(object: any): ISaturationFilter
5085 };
5086 Sepia2: {
5087 new(options?: any): ISepia2Filter;
5088 /**
5089 * Returns filter instance from an object representation
5090 * @param object Object to create an instance from
5091 */
5092 fromObject(object: any): ISepia2Filter
5093 };
5094 Sepia: {
5095 new(options?: any): ISepiaFilter;
5096 /**
5097 * Returns filter instance from an object representation
5098 * @param object Object to create an instance from
5099 */
5100 fromObject(object: any): ISepiaFilter
5101 };
5102 Tint: {
5103 new(options?: {
5104 /**
5105 * Color to tint the image with
5106 * @default #000000
5107 */
5108 color?: string;
5109 /** Opacity value that controls the tint effect's transparency (0..1) */
5110 opacity?: number;
5111 }): ITintFilter;
5112 /**
5113 * Returns filter instance from an object representation
5114 * @param object Object to create an instance from
5115 */
5116 fromObject(object: any): ITintFilter
5117 };
5118}
5119interface IBaseFilter {
5120 /**
5121 * Sets filter's properties from options
5122 * @param [options] Options object
5123 */
5124 setOptions(options?: any): void;
5125 /**
5126 * Returns object representation of an instance
5127 */
5128 toObject(): any;
5129 /**
5130 * Returns a JSON representation of an instance
5131 */
5132 toJSON(): string;
5133}
5134interface IBlendColorFilter extends IBaseFilter {
5135 color?: string;
5136 mode?: string;
5137 alpha?: number;
5138 /**
5139 * Applies filter to canvas element
5140 * @param canvasEl Canvas element to apply filter to
5141 */
5142 applyTo(canvasEl: HTMLCanvasElement): void;
5143}
5144interface IBlendImageFilter extends IBaseFilter {
5145 /**
5146 * Applies filter to canvas element
5147 * @param canvasEl Canvas element to apply filter to
5148 */
5149 applyTo(canvasEl: HTMLCanvasElement): void;
5150}
5151interface IBrightnessFilter extends IBaseFilter {
5152 /**
5153 * Applies filter to canvas element
5154 * @param canvasEl Canvas element to apply filter to
5155 */
5156 applyTo(canvasEl: HTMLCanvasElement): void;
5157}
5158interface IColorMatrix extends IBaseFilter {
5159 matrix?: number[];
5160 /**
5161 * Applies filter to canvas element
5162 * @param canvasEl Canvas element to apply filter to
5163 */
5164 applyTo(canvasEl: HTMLCanvasElement): void;
5165}
5166interface IContrastFilter extends IBaseFilter {
5167 /**
5168 * Applies filter to canvas element
5169 * @param canvasEl Canvas element to apply filter to
5170 */
5171 applyTo(canvasEl: HTMLCanvasElement): void;
5172}
5173interface IConvoluteFilter extends IBaseFilter {
5174 /**
5175 * Applies filter to canvas element
5176 * @param canvasEl Canvas element to apply filter to
5177 */
5178 applyTo(canvasEl: HTMLCanvasElement): void;
5179}
5180interface IGradientTransparencyFilter extends IBaseFilter {
5181 /**
5182 * Applies filter to canvas element
5183 * @param canvasEl Canvas element to apply filter to
5184 */
5185 applyTo(canvasEl: HTMLCanvasElement): void;
5186}
5187interface IGrayscaleFilter extends IBaseFilter {
5188 /**
5189 * Applies filter to canvas element
5190 * @param canvasEl Canvas element to apply filter to
5191 */
5192 applyTo(canvasEl: HTMLCanvasElement): void;
5193}
5194interface IInvertFilter extends IBaseFilter {
5195 /**
5196 * Applies filter to canvas element
5197 * @param canvasEl Canvas element to apply filter to
5198 */
5199 applyTo(canvasEl: HTMLCanvasElement): void;
5200}
5201interface IMaskFilter extends IBaseFilter {
5202 /**
5203 * Applies filter to canvas element
5204 * @param canvasEl Canvas element to apply filter to
5205 */
5206 applyTo(canvasEl: HTMLCanvasElement): void;
5207}
5208interface IMultiplyFilter extends IBaseFilter {
5209 /**
5210 * Applies filter to canvas element
5211 * @param canvasEl Canvas element to apply filter to
5212 */
5213 applyTo(canvasEl: HTMLCanvasElement): void;
5214}
5215interface INoiseFilter extends IBaseFilter {
5216 /**
5217 * Applies filter to canvas element
5218 * @param canvasEl Canvas element to apply filter to
5219 */
5220 applyTo(canvasEl: HTMLCanvasElement): void;
5221}
5222interface IPixelateFilter extends IBaseFilter {
5223 /**
5224 * Applies filter to canvas element
5225 * @param canvasEl Canvas element to apply filter to
5226 */
5227 applyTo(canvasEl: HTMLCanvasElement): void;
5228}
5229interface IRemoveWhiteFilter extends IBaseFilter {
5230 /**
5231 * Applies filter to canvas element
5232 * @param canvasEl Canvas element to apply filter to
5233 */
5234 applyTo(canvasEl: HTMLCanvasElement): void;
5235}
5236interface IResizeFilter extends IBaseFilter {
5237 /**
5238 * Resize type
5239 */
5240 resizeType: string;
5241
5242 /**
5243 * Scale factor for resizing, x axis
5244 */
5245 scaleX: number;
5246
5247 /**
5248 * Scale factor for resizing, y axis
5249 */
5250 scaleY: number;
5251
5252 /**
5253 * LanczosLobes parameter for lanczos filter
5254 */
5255 lanczosLobes: number;
5256 /**
5257 * Applies filter to canvas element
5258 * @param canvasEl Canvas element to apply filter to
5259 */
5260 applyTo(canvasEl: HTMLCanvasElement): void;
5261}
5262interface ISaturationFilter extends IBaseFilter {
5263 /**
5264 * Applies filter to canvas element
5265 * @param canvasEl Canvas element to apply filter to
5266 */
5267 applyTo(canvasEl: HTMLCanvasElement): void;
5268}
5269interface ISepiaFilter extends IBaseFilter {
5270 /**
5271 * Applies filter to canvas element
5272 * @param canvasEl Canvas element to apply filter to
5273 */
5274 applyTo(canvasEl: HTMLCanvasElement): void;
5275}
5276interface ISepia2Filter extends IBaseFilter {
5277 /**
5278 * Applies filter to canvas element
5279 * @param canvasEl Canvas element to apply filter to
5280 */
5281 applyTo(canvasEl: HTMLCanvasElement): void;
5282}
5283interface ITintFilter extends IBaseFilter {
5284 /**
5285 * Applies filter to canvas element
5286 * @param canvasEl Canvas element to apply filter to
5287 */
5288 applyTo(canvasEl: HTMLCanvasElement): void;
5289}
5290
5291////////////////////////////////////////////////////////////
5292// Brushes
5293////////////////////////////////////////////////////////////
5294export class BaseBrush {
5295 /**
5296 * Color of a brush
5297 */
5298 color: string;
5299
5300 /**
5301 * Width of a brush
5302 */
5303 width: number;
5304
5305 /**
5306 * Shadow object representing shadow of this shape.
5307 * <b>Backwards incompatibility note:</b> This property replaces "shadowColor" (String), "shadowOffsetX" (Number),
5308 * "shadowOffsetY" (Number) and "shadowBlur" (Number) since v1.2.12
5309 */
5310 shadow: Shadow | string;
5311 /**
5312 * Line endings style of a brush (one of "butt", "round", "square")
5313 */
5314 strokeLineCap: string;
5315
5316 /**
5317 * Corner style of a brush (one of "bevil", "round", "miter")
5318 */
5319 strokeLineJoin: string;
5320
5321 /**
5322 * Stroke Dash Array.
5323 */
5324 strokeDashArray: any[];
5325
5326 /**
5327 * Sets shadow of an object
5328 * @param [options] Options object or string (e.g. "2px 2px 10px rgba(0,0,0,0.2)")
5329 */
5330 setShadow(options: string | any): BaseBrush;
5331}
5332
5333export class CircleBrush extends BaseBrush {
5334 /**
5335 * Width of a brush
5336 */
5337 width: number;
5338 /**
5339 * Invoked inside on mouse down and mouse move
5340 */
5341 drawDot(pointer: any): void;
5342
5343 /**
5344 * @return Just added pointer point
5345 */
5346 addPoint(pointer: any): Point;
5347}
5348
5349export class SprayBrush extends BaseBrush {
5350 /**
5351 * Width of a brush
5352 */
5353 width: number;
5354 /**
5355 * Density of a spray (number of dots per chunk)
5356 */
5357 density: number;
5358
5359 /**
5360 * Width of spray dots
5361 */
5362 dotWidth: number;
5363 /**
5364 * Width variance of spray dots
5365 */
5366 dotWidthVariance: number;
5367
5368 /**
5369 * Whether opacity of a dot should be random
5370 */
5371 randomOpacity: boolean;
5372 /**
5373 * Whether overlapping dots (rectangles) should be removed (for performance reasons)
5374 */
5375 optimizeOverlapping: boolean;
5376
5377 addSprayChunk(pointer: any): void;
5378}
5379export class PatternBrush extends PencilBrush {
5380 getPatternSrc(): HTMLCanvasElement;
5381
5382 getPatternSrcFunction(): string;
5383
5384 /**
5385 * Creates "pattern" instance property
5386 */
5387 getPattern(): any;
5388 /**
5389 * Creates path
5390 */
5391 createPath(pathData: string): Path;
5392}
5393export class PencilBrush extends BaseBrush {
5394 /**
5395 * Converts points to SVG path
5396 * @param points Array of points
5397 */
5398 convertPointsToSVGPath(points: Array<{ x: number; y: number }>, minX?: number, minY?: number): string[];
5399
5400 /**
5401 * Creates fabric.Path object to add on canvas
5402 * @param pathData Path data
5403 */
5404 createPath(pathData: string): Path;
5405}
5406
5407///////////////////////////////////////////////////////////////////////////////
5408// Fabric util Interface
5409//////////////////////////////////////////////////////////////////////////////
5410interface IUtilAnimationOptions {
5411 /**
5412 * Starting value
5413 */
5414 startValue?: number;
5415 /**
5416 * Ending value
5417 */
5418 endValue?: number;
5419 /**
5420 * Value to modify the property by
5421 */
5422 byValue: number;
5423 /**
5424 * Duration of change (in ms)
5425 */
5426 duration?: number;
5427 /**
5428 * Callback; invoked on every value change
5429 */
5430 onChange?: Function;
5431 /**
5432 * Callback; invoked when value change is completed
5433 */
5434 onComplete?: Function;
5435 /**
5436 * Easing function
5437 */
5438 easing?: Function;
5439}
5440interface IUtilAnimation {
5441 /**
5442 * Changes value from one to another within certain period of time, invoking callbacks as value is being changed.
5443 * @param [options] Animation options
5444 */
5445 animate(options?: IUtilAnimationOptions): void;
5446 /**
5447 * requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/
5448 * In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method
5449 * @param callback Callback to invoke
5450 */
5451 requestAnimFrame(callback: Function): void;
5452}
5453
5454type IUtilAminEaseFunction = (t: number, b: number, c: number, d: number) => number;
5455
5456interface IUtilAnimEase {
5457 easeInBack: IUtilAminEaseFunction;
5458 easeInBounce: IUtilAminEaseFunction;
5459 easeInCirc: IUtilAminEaseFunction;
5460 easeInCubic: IUtilAminEaseFunction;
5461 easeInElastic: IUtilAminEaseFunction;
5462 easeInExpo: IUtilAminEaseFunction;
5463 easeInOutBack: IUtilAminEaseFunction;
5464 easeInOutBounce: IUtilAminEaseFunction;
5465 easeInOutCirc: IUtilAminEaseFunction;
5466 easeInOutCubic: IUtilAminEaseFunction;
5467 easeInOutElastic: IUtilAminEaseFunction;
5468 easeInOutExpo: IUtilAminEaseFunction;
5469 easeInOutQuad: IUtilAminEaseFunction;
5470 easeInOutQuart: IUtilAminEaseFunction;
5471 easeInOutQuint: IUtilAminEaseFunction;
5472 easeInOutSine: IUtilAminEaseFunction;
5473 easeInQuad: IUtilAminEaseFunction;
5474 easeInQuart: IUtilAminEaseFunction;
5475 easeInQuint: IUtilAminEaseFunction;
5476 easeInSine: IUtilAminEaseFunction;
5477 easeOutBack: IUtilAminEaseFunction;
5478 easeOutBounce: IUtilAminEaseFunction;
5479 easeOutCirc: IUtilAminEaseFunction;
5480 easeOutCubic: IUtilAminEaseFunction;
5481 easeOutElastic: IUtilAminEaseFunction;
5482 easeOutExpo: IUtilAminEaseFunction;
5483 easeOutQuad: IUtilAminEaseFunction;
5484 easeOutQuart: IUtilAminEaseFunction;
5485 easeOutQuint: IUtilAminEaseFunction;
5486 easeOutSine: IUtilAminEaseFunction;
5487}
5488
5489interface IUtilArc {
5490 /**
5491 * Draws arc
5492 */
5493 drawArc(ctx: CanvasRenderingContext2D, fx: number, fy: number, coords: number[]): void;
5494 /**
5495 * Calculate bounding box of a elliptic-arc
5496 * @param fx start point of arc
5497 * @param rx horizontal radius
5498 * @param ry vertical radius
5499 * @param rot angle of horizontal axe
5500 * @param large 1 or 0, whatever the arc is the big or the small on the 2 points
5501 * @param sweep 1 or 0, 1 clockwise or counterclockwise direction
5502 * @param tx end point of arc
5503 */
5504 getBoundsOfArc(fx: number, fy: number, rx: number, ry: number, rot: number, large: number, sweep: number, tx: number, ty: number): Point[];
5505 /**
5506 * Calculate bounding box of a beziercurve
5507 * @param x0 starting point
5508 * @param x1 first control point
5509 * @param x2 secondo control point
5510 * @param x3 end of beizer
5511 */
5512 getBoundsOfCurve(x0: number, y0: number, x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): Point[];
5513}
5514
5515interface IUtilDomEvent {
5516 /**
5517 * Cross-browser wrapper for getting event's coordinates
5518 * @param event Event object
5519 * @param upperCanvasEl &lt;canvas> element on which object selection is drawn
5520 */
5521 getPointer(event: Event, upperCanvasEl: HTMLCanvasElement): Point;
5522
5523 /**
5524 * Adds an event listener to an element
5525 */
5526 addListener(element: HTMLElement, eventName: string, handler: Function): void;
5527
5528 /**
5529 * Removes an event listener from an element
5530 */
5531 removeListener(element: HTMLElement, eventName: string, handler: Function): void;
5532}
5533
5534interface IUtilDomMisc {
5535 /**
5536 * Takes id and returns an element with that id (if one exists in a document)
5537 */
5538 getById(id: string | HTMLElement): HTMLElement;
5539 /**
5540 * Converts an array-like object (e.g. arguments or NodeList) to an array
5541 */
5542 toArray(arrayLike: any): any[];
5543 /**
5544 * Creates specified element with specified attributes
5545 * @param tagName Type of an element to create
5546 * @param [attributes] Attributes to set on an element
5547 * @return Newly created element
5548 */
5549 makeElement(tagName: string, attributes?: any): HTMLElement;
5550 /**
5551 * Adds class to an element
5552 * @param element Element to add class to
5553 * @param className Class to add to an element
5554 */
5555 addClass(element: HTMLElement, classname: string): void;
5556 /**
5557 * Wraps element with another element
5558 * @param element Element to wrap
5559 * @param wrapper Element to wrap with
5560 * @param [attributes] Attributes to set on a wrapper
5561 */
5562 wrapElement(element: HTMLElement, wrapper: HTMLElement | string, attributes?: any): HTMLElement;
5563 /**
5564 * Returns element scroll offsets
5565 * @param element Element to operate on
5566 * @param upperCanvasEl Upper canvas element
5567 */
5568 getScrollLeftTop(element: HTMLElement, upperCanvasEl: HTMLElement): { left: number; right: number; };
5569 /**
5570 * Returns offset for a given element
5571 * @param element Element to get offset for
5572 */
5573 getElementOffset(element: HTMLElement): { left: number; top: number; };
5574 /**
5575 * Returns style attribute value of a given element
5576 * @param element Element to get style attribute for
5577 * @param attr Style attribute to get for element
5578 */
5579 getElementStyle(elment: HTMLElement, attr: string): string;
5580 /**
5581 * Inserts a script element with a given url into a document; invokes callback, when that script is finished loading
5582 * @param url URL of a script to load
5583 * @param callback Callback to execute when script is finished loading
5584 */
5585 getScript(url: string, callback: Function): void;
5586 /**
5587 * Makes element unselectable
5588 * @param element Element to make unselectable
5589 */
5590 makeElementUnselectable(element: HTMLElement): HTMLElement;
5591 /**
5592 * Makes element selectable
5593 * @param element Element to make selectable
5594 */
5595 makeElementSelectable(element: HTMLElement): HTMLElement;
5596}
5597
5598interface IUtilDomRequest {
5599 /**
5600 * Cross-browser abstraction for sending XMLHttpRequest
5601 * @param url URL to send XMLHttpRequest to
5602 */
5603 request(url: string, options?: {
5604 /** @default "GET" */
5605 method?: string,
5606 /** Callback to invoke when request is completed */
5607 onComplete: Function,
5608 }): XMLHttpRequest;
5609}
5610
5611interface IUtilDomStyle {
5612 /**
5613 * Cross-browser wrapper for setting element's style
5614 */
5615 setStyle(element: HTMLElement, styles: any): HTMLElement;
5616}
5617
5618interface IUtilArray {
5619 /**
5620 * Invokes method on all items in a given array
5621 * @param array Array to iterate over
5622 * @param method Name of a method to invoke
5623 */
5624 invoke(array: any[], method: string): any[];
5625 /**
5626 * Finds minimum value in array (not necessarily "first" one)
5627 * @param array Array to iterate over
5628 */
5629 min(array: any[], byProperty: string): any;
5630 /**
5631 * Finds maximum value in array (not necessarily "first" one)
5632 * @param array Array to iterate over
5633 */
5634 max(array: any[], byProperty: string): any;
5635}
5636
5637interface IUtilClass {
5638 /**
5639 * Helper for creation of "classes".
5640 * @param [parent] optional "Class" to inherit from
5641 * @param [properties] Properties shared by all instances of this class
5642 * (be careful modifying objects defined here as this would affect all instances)
5643 */
5644 createClass(parent: Function, properties?: any): any;
5645 /**
5646 * Helper for creation of "classes".
5647 * @param [properties] Properties shared by all instances of this class
5648 * (be careful modifying objects defined here as this would affect all instances)
5649 */
5650 createClass(properties?: any): any;
5651}
5652
5653interface IUtilObject {
5654 /**
5655 * Copies all enumerable properties of one object to another
5656 * @param destination Where to copy to
5657 * @param source Where to copy from
5658 */
5659 extend(destination: any, source: any): any;
5660
5661 /**
5662 * Creates an empty object and copies all enumerable properties of another object to it
5663 * @param object Object to clone
5664 */
5665 clone(object: any): any;
5666}
5667
5668interface IUtilString {
5669 /**
5670 * Camelizes a string
5671 * @param string String to camelize
5672 */
5673 camelize(string: string): string;
5674
5675 /**
5676 * Capitalizes a string
5677 * @param string String to capitalize
5678 * @param [firstLetterOnly] If true only first letter is capitalized
5679 * and other letters stay untouched, if false first letter is capitalized
5680 * and other letters are converted to lowercase.
5681 */
5682 capitalize(string: string, firstLetterOnly: boolean): string;
5683
5684 /**
5685 * Escapes XML in a string
5686 * @param string String to escape
5687 */
5688 escapeXml(string: string): string;
5689
5690 /**
5691 * Divide a string in the user perceived single units
5692 * @param {String} textstring String to escape
5693 * @return {Array} array containing the graphemes
5694 */
5695 graphemeSplit(string: string): string[];
5696}
5697
5698interface IUtilMisc {
5699 /**
5700 * Removes value from an array.
5701 * Presence of value (and its position in an array) is determined via `Array.prototype.indexOf`
5702 */
5703 removeFromArray(array: any[], value: any): any[];
5704
5705 /**
5706 * Returns random number between 2 specified ones.
5707 * @param min lower limit
5708 * @param max upper limit
5709 */
5710 getRandomInt(min: number, max: number): number;
5711
5712 /**
5713 * Transforms degrees to radians.
5714 * @param degrees value in degrees
5715 */
5716 degreesToRadians(degrees: number): number;
5717
5718 /**
5719 * Transforms radians to degrees.
5720 * @param radians value in radians
5721 */
5722 radiansToDegrees(radians: number): number;
5723
5724 /**
5725 * Rotates `point` around `origin` with `radians`
5726 * @param point The point to rotate
5727 * @param origin The origin of the rotation
5728 * @param radians The radians of the angle for the rotation
5729 */
5730 rotatePoint(point: Point, origin: Point, radians: number): Point;
5731
5732 /**
5733 * Rotates `vector` with `radians`
5734 * @param vector The vector to rotate (x and y)
5735 * @param radians The radians of the angle for the rotation
5736 */
5737 rotateVector(vector: { x: number, y: number }, radians: number): { x: number, y: number };
5738
5739 /**
5740 * Apply transform t to point p
5741 * @param p The point to transform
5742 * @param t The transform
5743 * @param [ignoreOffset] Indicates that the offset should not be applied
5744 */
5745 transformPoint(p: Point, t: any[], ignoreOffset?: boolean): Point;
5746
5747 /**
5748 * Invert transformation t
5749 * @param t The transform
5750 */
5751 invertTransform(t: any[]): any[];
5752
5753 /**
5754 * A wrapper around Number#toFixed, which contrary to native method returns number, not string.
5755 * @param number number to operate on
5756 * @param fractionDigits number of fraction digits to "leave"
5757 */
5758 toFixed(number: number, fractionDigits: number): number;
5759
5760 /**
5761 * Converts from attribute value to pixel value if applicable.
5762 * Returns converted pixels or original value not converted.
5763 * @param value number to operate on
5764 */
5765 parseUnit(value: number | string, fontSize?: number): number | string;
5766
5767 /**
5768 * Function which always returns `false`.
5769 */
5770 falseFunction(): boolean;
5771
5772 /**
5773 * Returns klass "Class" object of given namespace
5774 * @param type Type of object (eg. 'circle')
5775 * @param namespace Namespace to get klass "Class" object from
5776 */
5777 getKlass(type: string, namespace: string): any;
5778
5779 /**
5780 * Returns object of given namespace
5781 * @param namespace Namespace string e.g. 'fabric.Image.filter' or 'fabric'
5782 */
5783 resolveNamespace(namespace: string): any;
5784
5785 /**
5786 * Loads image element from given url and passes it to a callback
5787 * @param url URL representing an image
5788 * @param callback Callback; invoked with loaded image
5789 * @param [context] Context to invoke callback in
5790 * @param [crossOrigin] crossOrigin value to set image element to
5791 */
5792 loadImage(url: string, callback: (image: HTMLImageElement) => void, context?: any, crossOrigin?: string): void;
5793
5794 /**
5795 * Creates corresponding fabric instances from their object representations
5796 * @param objects Objects to enliven
5797 * @param callback Callback to invoke when all objects are created
5798 * @param namespace Namespace to get klass "Class" object from
5799 * @param reviver Method for further parsing of object elements, called after each fabric object created.
5800 */
5801 enlivenObjects(objects: any[], callback: Function, namespace: string, reviver?: Function): void;
5802
5803 /**
5804 * Groups SVG elements (usually those retrieved from SVG document)
5805 * @param elements SVG elements to group
5806 * @param [options] Options object
5807 */
5808 groupSVGElements(elements: any[], options?: any, path?: string): Object | Group;
5809
5810 /**
5811 * Populates an object with properties of another object
5812 * @param source Source object
5813 * @param destination Destination object
5814 * @param properties Propertie names to include
5815 */
5816 populateWithProperties(source: any, destination: any, properties: any): void;
5817
5818 /**
5819 * Draws a dashed line between two points
5820 * This method is used to draw dashed line around selection area.
5821 * @param ctx context
5822 * @param x start x coordinate
5823 * @param y start y coordinate
5824 * @param x2 end x coordinate
5825 * @param y2 end y coordinate
5826 * @param da dash array pattern
5827 */
5828 drawDashedLine(ctx: CanvasRenderingContext2D, x: number, y: number, x2: number, y2: number, da: any[]): void;
5829
5830 /**
5831 * Creates canvas element and initializes it via excanvas if necessary
5832 * @param [canvasEl] optional canvas element to initialize;
5833 * when not given, element is created implicitly
5834 */
5835 createCanvasElement(canvasEl?: HTMLCanvasElement): HTMLCanvasElement;
5836
5837 /**
5838 * Creates image element (works on client and node)
5839 */
5840 createImage(): HTMLImageElement;
5841
5842 /**
5843 * Creates accessors (getXXX, setXXX) for a "class", based on "stateProperties" array
5844 * @param klass "Class" to create accessors for
5845 */
5846 createAccessors(klass: any): any;
5847
5848 /**
5849 * @param receiver Object implementing `clipTo` method
5850 * @param ctx Context to clip
5851 */
5852 clipContext(receiver: Object, ctx: CanvasRenderingContext2D): void;
5853
5854 /**
5855 * Multiply matrix A by matrix B to nest transformations
5856 * @param a First transformMatrix
5857 * @param b Second transformMatrix
5858 */
5859 multiplyTransformMatrices(a: number[], b: number[]): number[];
5860
5861 /**
5862 * Decomposes standard 2x2 matrix into transform componentes
5863 * @param a transformMatrix
5864 */
5865 qrDecompose(a: number[]): { angle: number, scaleX: number, scaleY: number, skewX: number, skewY: number, translateX: number, translateY: number };
5866
5867 /**
5868 * Extract Object transform values
5869 * @param {fabric.Object} target object to read from
5870 * @return {Object} Components of transform
5871 */
5872 saveObjectTransform(target: Object): { scaleX: number, scaleY: number, skewX: number, skewY: number, angle: number, left: number, flipX: boolean, flipY: boolean, top: number };
5873
5874 /**
5875 * Creates a transform matrix with the specified scale and skew
5876 */
5877 customTransformMatrix(scaleX: number, scaleY: number, skewX: number): number[];
5878
5879 /**
5880 * Returns string representation of function body
5881 * @param fn Function to get body of
5882 */
5883 getFunctionBody(fn: Function): string;
5884
5885 /**
5886 * Returns true if context has transparent pixel
5887 * at specified location (taking tolerance into account)
5888 * @param ctx context
5889 * @param x x coordinate
5890 * @param y y coordinate
5891 * @param tolerance Tolerance
5892 */
5893 isTransparent(ctx: CanvasRenderingContext2D, x: number, y: number, tolerance: number): boolean;
5894}
5895
5896export const util: IUtil;
5897interface IUtil extends IUtilAnimation, IUtilArc, IObservable<IUtil>, IUtilDomEvent, IUtilDomMisc,
5898 IUtilDomRequest, IUtilDomStyle, IUtilClass, IUtilMisc {
5899 ease: IUtilAnimEase;
5900 array: IUtilArray;
5901 object: IUtilObject;
5902 string: IUtilString;
5903}
5904
5905export interface Resources {
5906 [key: string]: HTMLCanvasElement
5907}
5908export interface FilterBackend {
5909 resources: Resources;
5910
5911 applyFilters(filters: IBaseFilter[], sourceElement: HTMLImageElement | HTMLCanvasElement, sourceWidth: number, sourceHeight: number, targetCanvas: HTMLCanvasElement,cacheKey?: string): any;
5912
5913 evictCachesForKey(cacheKey: string): void;
5914
5915 dispose(): void;
5916
5917 clearWebGLCaches(): void;
5918
5919}
5920export let filterBackend: FilterBackend | undefined;
5921export interface Canvas2dFilterBackend extends FilterBackend { }
5922export class Canvas2dFilterBackend {
5923 constructor();
5924}
5925
5926export interface GPUInfo{
5927 renderer:string;
5928 vendor:string;
5929}
5930
5931export interface WebglFilterBackendOptions {
5932 tileSize: number;
5933}
5934export interface WebglFilterBackend extends FilterBackend, WebglFilterBackendOptions {
5935 setupGLContext(width: number, height: number): void;
5936
5937 chooseFastestCopyGLTo2DMethod(width: number, height: number): void;
5938
5939 createWebGLCanvas(width: number, height: number): void;
5940
5941 applyFiltersDebug(filters: IBaseFilter[], sourceElement: HTMLImageElement | HTMLCanvasElement, sourceWidth: number, sourceHeight: number, targetCanvas: HTMLCanvasElement, cacheKey?: string): any;
5942
5943 glErrorToString(context: any, errorCode: any): string;
5944
5945 createTexture(gl: WebGLRenderingContext, width: number, height: number, textureImageSource?: HTMLImageElement | HTMLCanvasElement): WebGLTexture;
5946
5947 getCachedTexture(uniqueId: string, textureImageSource: HTMLImageElement | HTMLCanvasElement): WebGLTexture;
5948
5949 copyGLTo2D(gl: WebGLRenderingContext, pipelineState: any): void;
5950
5951 captureGPUInfo(): GPUInfo;
5952}
5953
5954export class WebglFilterBackend {
5955 constructor(options?: WebglFilterBackendOptions);
5956}
5957
\No newline at end of file