@leapfrog/interactive-canvas 2.0.24-beta-1 → 2.0.24-beta-3
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.
- package/dist/interactive-canvas.es.js +19 -14
- package/dist/interactive-canvas.js +19 -14
- package/package.json +1 -1
|
@@ -3045,31 +3045,36 @@ class AbstractInteractiveCanvas {
|
|
|
3045
3045
|
//const canvas = createCanvas(1, 1);
|
|
3046
3046
|
//const ctx = canvas.getContext("2d");
|
|
3047
3047
|
const image = yield loadImage(imageUrl);
|
|
3048
|
-
const fabricImage = new this.fabric.Image(image, {
|
|
3049
|
-
src: imageUrl,
|
|
3050
|
-
crossOrigin: "anonymous",
|
|
3051
|
-
toObject: function () {
|
|
3052
|
-
return Object.assign(Object.assign({}, fabric.Object.prototype.toObject.call(this)), { src: this.src, crossOrigin: this.crossOrigin });
|
|
3053
|
-
},
|
|
3054
|
-
});
|
|
3055
3048
|
//const fabricImage = new this.fabric.Image(image as any, { src: imageUrl, crossOrigin: "anonymous" });
|
|
3056
3049
|
const id = this.randomId();
|
|
3057
3050
|
let newScale = 1;
|
|
3058
|
-
const curWidth = newScale *
|
|
3051
|
+
const curWidth = newScale * image.width;
|
|
3059
3052
|
if (curWidth > maxWidth) {
|
|
3060
3053
|
newScale = maxWidth / curWidth;
|
|
3061
3054
|
}
|
|
3062
|
-
|
|
3063
|
-
// const fabricImage = new FabricImage(imageUrl, {
|
|
3064
|
-
//const fabricImage = new this.fabric.Image(image, {
|
|
3065
|
-
// const fabricImage = new FabricImage(image as any, {
|
|
3066
|
-
fabricImage.set({
|
|
3055
|
+
const fabricImage = new this.fabric.Image(image, {
|
|
3067
3056
|
id: id,
|
|
3068
3057
|
scaleX: newScale,
|
|
3069
3058
|
scaleY: newScale,
|
|
3070
3059
|
originX: "left",
|
|
3071
|
-
originY: "top"
|
|
3060
|
+
originY: "top",
|
|
3061
|
+
src: imageUrl,
|
|
3062
|
+
crossOrigin: "anonymous",
|
|
3063
|
+
toObject: function () {
|
|
3064
|
+
return Object.assign(Object.assign({}, fabric.Object.prototype.toObject.call(this)), { src: this.src, crossOrigin: this.crossOrigin, id: id });
|
|
3065
|
+
},
|
|
3072
3066
|
});
|
|
3067
|
+
// Set image properties and add to the canvas
|
|
3068
|
+
// const fabricImage = new FabricImage(imageUrl, {
|
|
3069
|
+
//const fabricImage = new this.fabric.Image(image, {
|
|
3070
|
+
// const fabricImage = new FabricImage(image as any, {
|
|
3071
|
+
/* fabricImage.set({
|
|
3072
|
+
id: id,
|
|
3073
|
+
scaleX: newScale,
|
|
3074
|
+
scaleY: newScale,
|
|
3075
|
+
originX: "left",
|
|
3076
|
+
originY: "top"
|
|
3077
|
+
});*/
|
|
3073
3078
|
console.log("headless image-->", fabricImage);
|
|
3074
3079
|
this.fabricCanvas.add(fabricImage);
|
|
3075
3080
|
const canvasObjectData = new CanvasObjectData(ObjectType.IMAGE, id);
|
|
@@ -3066,31 +3066,36 @@ class AbstractInteractiveCanvas {
|
|
|
3066
3066
|
//const canvas = createCanvas(1, 1);
|
|
3067
3067
|
//const ctx = canvas.getContext("2d");
|
|
3068
3068
|
const image = yield canvas.loadImage(imageUrl);
|
|
3069
|
-
const fabricImage = new this.fabric.Image(image, {
|
|
3070
|
-
src: imageUrl,
|
|
3071
|
-
crossOrigin: "anonymous",
|
|
3072
|
-
toObject: function () {
|
|
3073
|
-
return Object.assign(Object.assign({}, fabric__namespace.Object.prototype.toObject.call(this)), { src: this.src, crossOrigin: this.crossOrigin });
|
|
3074
|
-
},
|
|
3075
|
-
});
|
|
3076
3069
|
//const fabricImage = new this.fabric.Image(image as any, { src: imageUrl, crossOrigin: "anonymous" });
|
|
3077
3070
|
const id = this.randomId();
|
|
3078
3071
|
let newScale = 1;
|
|
3079
|
-
const curWidth = newScale *
|
|
3072
|
+
const curWidth = newScale * image.width;
|
|
3080
3073
|
if (curWidth > maxWidth) {
|
|
3081
3074
|
newScale = maxWidth / curWidth;
|
|
3082
3075
|
}
|
|
3083
|
-
|
|
3084
|
-
// const fabricImage = new FabricImage(imageUrl, {
|
|
3085
|
-
//const fabricImage = new this.fabric.Image(image, {
|
|
3086
|
-
// const fabricImage = new FabricImage(image as any, {
|
|
3087
|
-
fabricImage.set({
|
|
3076
|
+
const fabricImage = new this.fabric.Image(image, {
|
|
3088
3077
|
id: id,
|
|
3089
3078
|
scaleX: newScale,
|
|
3090
3079
|
scaleY: newScale,
|
|
3091
3080
|
originX: "left",
|
|
3092
|
-
originY: "top"
|
|
3081
|
+
originY: "top",
|
|
3082
|
+
src: imageUrl,
|
|
3083
|
+
crossOrigin: "anonymous",
|
|
3084
|
+
toObject: function () {
|
|
3085
|
+
return Object.assign(Object.assign({}, fabric__namespace.Object.prototype.toObject.call(this)), { src: this.src, crossOrigin: this.crossOrigin, id: id });
|
|
3086
|
+
},
|
|
3093
3087
|
});
|
|
3088
|
+
// Set image properties and add to the canvas
|
|
3089
|
+
// const fabricImage = new FabricImage(imageUrl, {
|
|
3090
|
+
//const fabricImage = new this.fabric.Image(image, {
|
|
3091
|
+
// const fabricImage = new FabricImage(image as any, {
|
|
3092
|
+
/* fabricImage.set({
|
|
3093
|
+
id: id,
|
|
3094
|
+
scaleX: newScale,
|
|
3095
|
+
scaleY: newScale,
|
|
3096
|
+
originX: "left",
|
|
3097
|
+
originY: "top"
|
|
3098
|
+
});*/
|
|
3094
3099
|
console.log("headless image-->", fabricImage);
|
|
3095
3100
|
this.fabricCanvas.add(fabricImage);
|
|
3096
3101
|
const canvasObjectData = new CanvasObjectData(exports.ObjectType.IMAGE, id);
|