image try agian

gui/src/2D/controls/image.ts

@@ -32,7 +32,6 @@ export class Image extends Control {
     private _cellHeight: number = 0;
     private _cellId: number = -1;
 
-    private _populateNinePatchSlicesFromImage = false;
     private _sliceLeft: number;
     private _sliceRight: number;
     private _sliceTop: number;
@@ -63,26 +62,6 @@ export class Image extends Control {
     }
 
     /**
-     * Gets or sets a boolean indicating if nine patch slices (left, top, right, bottom) should be read from image data
-     */
-    @serialize()
-    public get populateNinePatchSlicesFromImage(): boolean {
-        return this._populateNinePatchSlicesFromImage;
-    }
-
-    public set populateNinePatchSlicesFromImage(value: boolean) {
-        if (this._populateNinePatchSlicesFromImage === value) {
-            return;
-        }
-
-        this._populateNinePatchSlicesFromImage = value;
-
-        if (this._populateNinePatchSlicesFromImage && this._loaded) {
-            this._extractNinePatchSliceDataFromImage();
-        }
-    }
-
-    /**
      * Gets or sets a boolean indicating if pointers should only be validated on pixels with alpha > 0.
      * Beware using this as this will comsume more memory as the image has to be stored twice
      */
@@ -402,9 +381,9 @@ export class Image extends Control {
         this._imageHeight = this._domImage.height;
         this._loaded = true;
 
-        if (this._populateNinePatchSlicesFromImage) {
-            this._extractNinePatchSliceDataFromImage();
-        }
+        // if (this._populateNinePatchSlicesFromImage) {
+        //     this._extractNinePatchSliceDataFromImage();
+        // }
 
         if (this._autoScale) {
             this.synchronizeSizeWithContent();
@@ -415,56 +394,6 @@ export class Image extends Control {
         this._markAsDirty();
     }
 
-    private _extractNinePatchSliceDataFromImage() {
-        if (!this._workingCanvas) {
-            this._workingCanvas = document.createElement("canvas");
-        }
-        const canvas = this._workingCanvas;
-        const context = canvas.getContext("2d")!;
-        const width = this._domImage.width;
-        const height = this._domImage.height;
-
-        canvas.width = width;
-        canvas.height = height;
-
-        context.drawImage(this._domImage, 0, 0, width, height);
-        const imageData = context.getImageData(0, 0, width, height);
-
-        // Left and right
-        this._sliceLeft = -1;
-        this._sliceRight = -1;
-        for (var x = 0; x < width; x++) {
-            const alpha = imageData.data[x * 4 + 3];
-
-            if (alpha > 127 && this._sliceLeft === -1) {
-                this._sliceLeft = x;
-                continue;
-            }
-
-            if (alpha < 127 && this._sliceLeft > -1) {
-                this._sliceRight = x;
-                break;
-            }
-        }
-
-        // top and bottom
-        this._sliceTop = -1;
-        this._sliceBottom = -1;
-        for (var y = 0; y < height; y++) {
-            const alpha = imageData.data[y * width * 4 + 3];
-
-            if (alpha > 127 && this._sliceTop === -1) {
-                this._sliceTop = y;
-                continue;
-            }
-
-            if (alpha < 127 && this._sliceTop > -1) {
-                this._sliceBottom = y;
-                break;
-            }
-        }
-    }
-
     /**
      * Gets the image source url
      */
@@ -644,7 +573,6 @@ export class Image extends Control {
      */
     constructor(public name?: string, url: Nullable<string> = null) {
         super(name);
-
         this.source = url;
     }
 
@@ -818,51 +746,35 @@ export class Image extends Control {
         context.restore();
     }
 
-    private _renderCornerPatch(context: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, targetX: number, targetY: number): void {
-        this._drawImage(context, x, y, width, height, this._currentMeasure.left + targetX, this._currentMeasure.top + targetY, width, height);
-    }
-
     private _renderNinePatch(context: CanvasRenderingContext2D): void {
-        let height = this._imageHeight;
-        let leftWidth = this._sliceLeft;
-        let topHeight = this._sliceTop;
-        let bottomHeight = this._imageHeight - this._sliceBottom;
-        let rightWidth = this._imageWidth - this._sliceRight;
-        let left = 0;
-        let top = 0;
-
-        if (this._populateNinePatchSlicesFromImage) {
-            left = 1;
-            top = 1;
-            height -= 2;
-            leftWidth -= 1;
-            topHeight -= 1;
-            bottomHeight -= 1;
-            rightWidth -= 1;
-        }
-
-        const centerWidth = this._sliceRight - this._sliceLeft;
-        const targetCenterWidth = this._currentMeasure.width - rightWidth - this.sliceLeft;
-        const targetTopHeight = this._currentMeasure.height - height + this._sliceBottom;
-
-        // Corners
-        this._renderCornerPatch(context, left, top, leftWidth, topHeight, 0, 0);
-        this._renderCornerPatch(context, left, this._sliceBottom, leftWidth, height - this._sliceBottom, 0, targetTopHeight);
-
-        this._renderCornerPatch(context, this._sliceRight, top, rightWidth, topHeight, this._currentMeasure.width - rightWidth, 0);
-        this._renderCornerPatch(context, this._sliceRight, this._sliceBottom, rightWidth, height - this._sliceBottom, this._currentMeasure.width - rightWidth, targetTopHeight);
-
-        // Center
-        this._drawImage(context, this._sliceLeft, this._sliceTop, centerWidth, this._sliceBottom - this._sliceTop, this._currentMeasure.left + leftWidth, this._currentMeasure.top + topHeight, targetCenterWidth, targetTopHeight - topHeight);
-
-        // Borders
-        this._drawImage(context, left, this._sliceTop, leftWidth, this._sliceBottom - this._sliceTop, this._currentMeasure.left, this._currentMeasure.top + topHeight, leftWidth, targetTopHeight - topHeight);
-
-        this._drawImage(context, this._sliceRight, this._sliceTop, leftWidth, this._sliceBottom - this._sliceTop, this._currentMeasure.left + this._currentMeasure.width - rightWidth, this._currentMeasure.top + topHeight, leftWidth, targetTopHeight - topHeight);
-
-        this._drawImage(context, this._sliceLeft, top, centerWidth, topHeight, this._currentMeasure.left + leftWidth, this._currentMeasure.top, targetCenterWidth, topHeight);
-
-        this._drawImage(context, this._sliceLeft, this._sliceBottom, centerWidth, bottomHeight, this._currentMeasure.left + leftWidth, this._currentMeasure.top + targetTopHeight, targetCenterWidth, bottomHeight);
+        let height = this._imageHeight, width = this._imageWidth;
+        let leftWidth = this._sliceLeft, rightWidth = this._imageWidth - this._sliceRight;
+        let topHeight = this._sliceTop, bottomHeight = this._imageHeight - this._sliceBottom;
+        let centerWidth = width - leftWidth - rightWidth, centerHeight = height - topHeight - bottomHeight;
+        let widthFactor = width / this._currentMeasure.width, heightFactor = height / this._currentMeasure.height;
+        let wfh = widthFactor * 0.5, hfh = heightFactor * 0.5;
+        let leftTargetWidth = leftWidth * widthFactor, rightTargetWidth = rightWidth * widthFactor;
+        let topTargetHeight = topHeight * heightFactor, bottomTargetHeight = bottomHeight * heightFactor;
+        let centerTargetWidth = centerWidth * widthFactor, centerTargetHeight = centerHeight * heightFactor;
+
+        //Top Left
+        this._drawImage(context, 0, 0, leftWidth, topHeight, this._currentMeasure.left, this._currentMeasure.top, leftTargetWidth, topTargetHeight);
+        //Top
+        this._drawImage(context, leftWidth, 0, centerWidth, topHeight, this._currentMeasure.left + leftTargetWidth - wfh, this._currentMeasure.top, centerTargetWidth + widthFactor, topTargetHeight);
+        //Top Right
+        this._drawImage(context, leftWidth + centerWidth, 0, rightWidth, topHeight, this._currentMeasure.left + leftTargetWidth + centerTargetWidth, this._currentMeasure.top, rightTargetWidth, topTargetHeight);
+        //Left
+        this._drawImage(context, 0, topHeight, leftWidth, centerHeight, this._currentMeasure.left, this._currentMeasure.top + topTargetHeight - hfh, leftTargetWidth, centerTargetHeight + heightFactor);
+        //Center
+        this._drawImage(context, leftWidth, topHeight, centerWidth, centerHeight, this._currentMeasure.left + leftTargetWidth - wfh, this._currentMeasure.top + topTargetHeight - hfh, centerTargetWidth + widthFactor, centerTargetHeight + heightFactor);
+        //Right
+        this._drawImage(context, leftWidth + centerWidth, topHeight, rightWidth, centerHeight, this._currentMeasure.left + leftTargetWidth + centerTargetWidth, this._currentMeasure.top + topTargetHeight - hfh, rightTargetWidth, centerTargetHeight + heightFactor);
+        //Bottom Left
+        this._drawImage(context, 0, topHeight + centerHeight, leftWidth, bottomHeight, this._currentMeasure.left, this._currentMeasure.top + topTargetHeight + centerTargetHeight, leftTargetWidth, bottomTargetHeight);
+        //Bottom
+        this._drawImage(context, leftWidth, topHeight + centerHeight, centerWidth, bottomHeight, this._currentMeasure.left + leftTargetWidth - wfh, this._currentMeasure.top + topTargetHeight + centerTargetHeight, centerTargetWidth + widthFactor, bottomTargetHeight);
+        //Bottom Right
+        this._drawImage(context, leftWidth + centerWidth, topHeight + centerHeight, rightWidth, bottomHeight, this._currentMeasure.left + leftTargetWidth + centerTargetWidth, this._currentMeasure.top + topTargetHeight + centerTargetHeight, rightTargetWidth, bottomTargetHeight);
     }
 
     public dispose() {
@@ -883,4 +795,4 @@ export class Image extends Control {
     /** NINE_PATCH */
     public static readonly STRETCH_NINE_PATCH = 4;
 }
-_TypeStore.RegisteredTypes["BABYLON.GUI.Image"] = Image;
+_TypeStore.RegisteredTypes["BABYLON.GUI.Image"] = Image;