|
|
@@ -32,6 +32,7 @@ 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;
|
|
|
@@ -62,6 +63,26 @@ 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
|
|
|
*/
|
|
|
@@ -381,9 +402,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();
|
|
|
@@ -394,6 +415,56 @@ 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
|
|
|
*/
|
|
|
@@ -573,6 +644,7 @@ export class Image extends Control {
|
|
|
*/
|
|
|
constructor(public name?: string, url: Nullable<string> = null) {
|
|
|
super(name);
|
|
|
+
|
|
|
this.source = url;
|
|
|
}
|
|
|
|
|
|
@@ -746,35 +818,51 @@ 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, 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);
|
|
|
+ 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);
|
|
|
}
|
|
|
|
|
|
public dispose() {
|
Andrew V Butt Sr