customized-fabric 1.1.7 → 1.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,7 +6,7 @@ const constants_1 = require("./constants");
|
|
|
6
6
|
const utils_1 = require("../utils");
|
|
7
7
|
const objectId_1 = require("../utils/objectId");
|
|
8
8
|
const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
|
|
9
|
-
initialize: function (options) {
|
|
9
|
+
initialize: async function (options) {
|
|
10
10
|
this.rectObject = new fabric_1.fabric.Rect({
|
|
11
11
|
width: options?.width,
|
|
12
12
|
height: options?.height,
|
|
@@ -39,6 +39,32 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
|
|
|
39
39
|
if (options?.hideStroke) {
|
|
40
40
|
this.rectObject.set({ strokeWidth: 0 });
|
|
41
41
|
}
|
|
42
|
+
if (options?.image) {
|
|
43
|
+
const { image } = options;
|
|
44
|
+
const { url, data, clipPath } = image;
|
|
45
|
+
if (url && data && clipPath) {
|
|
46
|
+
const loadedImage = await (0, utils_1.loadImageFromUrl)(image?.url);
|
|
47
|
+
if (loadedImage) {
|
|
48
|
+
const { top, left, scaleX, width, originX, originY } = data;
|
|
49
|
+
const ratioWidth = (width * scaleX) / (clipPath.width * clipPath.scaleX);
|
|
50
|
+
const ratioPosition = this.width / clipPath.width;
|
|
51
|
+
loadedImage.set({
|
|
52
|
+
...data,
|
|
53
|
+
top: this.top + ratioPosition * top,
|
|
54
|
+
left: this.left + ratioPosition * left,
|
|
55
|
+
clipPath: new fabric_1.fabric.Rect({
|
|
56
|
+
width: this.width,
|
|
57
|
+
height: this.height,
|
|
58
|
+
top: this.top,
|
|
59
|
+
left: this.left,
|
|
60
|
+
absolutePositioned: true,
|
|
61
|
+
}),
|
|
62
|
+
});
|
|
63
|
+
loadedImage.scaleToWidth(ratioWidth * this.width);
|
|
64
|
+
this?.canvas?.add(loadedImage);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
42
68
|
},
|
|
43
69
|
loadImageFromUrl: async function (url) {
|
|
44
70
|
fabric_1.fabric.Image.fromURL(url, (loadedImage) => {
|
|
@@ -105,20 +131,19 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
|
|
|
105
131
|
else if (typeof image == "string") {
|
|
106
132
|
loadedImage = await (0, utils_1.loadImageFromUrl)(image);
|
|
107
133
|
}
|
|
108
|
-
const clipPath = new fabric_1.fabric.Rect({
|
|
109
|
-
width: this.width,
|
|
110
|
-
height: this.height,
|
|
111
|
-
top: this.top,
|
|
112
|
-
left: this.left,
|
|
113
|
-
absolutePositioned: true,
|
|
114
|
-
});
|
|
115
134
|
if (loadedImage) {
|
|
116
135
|
loadedImage.set({
|
|
117
136
|
originX: "left",
|
|
118
137
|
originY: "top",
|
|
119
138
|
top: this.top,
|
|
120
139
|
left: this.left,
|
|
121
|
-
clipPath:
|
|
140
|
+
clipPath: new fabric_1.fabric.Rect({
|
|
141
|
+
width: this.width,
|
|
142
|
+
height: this.height,
|
|
143
|
+
top: this.top,
|
|
144
|
+
left: this.left,
|
|
145
|
+
absolutePositioned: true,
|
|
146
|
+
}),
|
|
122
147
|
});
|
|
123
148
|
this.fitImage(loadedImage);
|
|
124
149
|
this.uploadedImage = loadedImage;
|
|
@@ -5,4 +5,39 @@ export interface IImagePlaceholderOptions extends fabric.IGroupOptions {
|
|
|
5
5
|
layerId: number;
|
|
6
6
|
imageFile?: File;
|
|
7
7
|
hideStroke?: boolean;
|
|
8
|
+
image?: {
|
|
9
|
+
url: string;
|
|
10
|
+
data: {
|
|
11
|
+
originX: string;
|
|
12
|
+
originY: string;
|
|
13
|
+
left: number;
|
|
14
|
+
top: number;
|
|
15
|
+
width: number;
|
|
16
|
+
height: number;
|
|
17
|
+
scaleX: number;
|
|
18
|
+
scaleY: number;
|
|
19
|
+
angle: number;
|
|
20
|
+
flipX: boolean;
|
|
21
|
+
flipY: boolean;
|
|
22
|
+
skewX: number;
|
|
23
|
+
skewY: number;
|
|
24
|
+
opacity: number;
|
|
25
|
+
};
|
|
26
|
+
clipPath: {
|
|
27
|
+
originX: string;
|
|
28
|
+
originY: string;
|
|
29
|
+
left: number;
|
|
30
|
+
top: number;
|
|
31
|
+
width: number;
|
|
32
|
+
height: number;
|
|
33
|
+
scaleX: number;
|
|
34
|
+
scaleY: number;
|
|
35
|
+
angle: number;
|
|
36
|
+
flipX: boolean;
|
|
37
|
+
flipY: boolean;
|
|
38
|
+
skewX: number;
|
|
39
|
+
skewY: number;
|
|
40
|
+
opacity: number;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
8
43
|
}
|