Commit 1552ded3 authored by 李维's avatar 李维

添加热区布局工具条

parent 8c8c9939
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
import TWEEN from "@tweenjs/tween.js";
import TWEEN from '@tweenjs/tween.js';
interface AirWindow extends Window { interface AirWindow extends Window {
air: any; air: any;
...@@ -10,7 +9,7 @@ declare let window: AirWindow; ...@@ -10,7 +9,7 @@ declare let window: AirWindow;
class Sprite { class Sprite {
x = 0; x = 0;
y = 0; y = 0;
color = ''; color = "";
radius = 0; radius = 0;
alive = false; alive = false;
margin = 0; margin = 0;
...@@ -27,18 +26,10 @@ class Sprite { ...@@ -27,18 +26,10 @@ class Sprite {
update($event) { update($event) {
this.draw(); this.draw();
} }
draw() { draw() {}
}
} }
export class MySprite extends Sprite { export class MySprite extends Sprite {
_width = 0; _width = 0;
_height = 0; _height = 0;
_anchorX = 0; _anchorX = 0;
...@@ -65,67 +56,98 @@ export class MySprite extends Sprite { ...@@ -65,67 +56,98 @@ export class MySprite extends Sprite {
childDepandVisible = true; childDepandVisible = true;
childDepandAlpha = false; childDepandAlpha = false;
hideArrow = false;
showColorMask = false;
img; img;
_z = 0; _z = 0;
_showRect; _showRect;
_bitmapFlag = false; _bitmapFlag = false;
_offCanvas; _offCanvas;
_offCtx; _offCtx;
set btimapFlag(v) {
this._bitmapFlag = v;
}
get btimapFlag() {
return this._bitmapFlag;
}
set alpha(v) {
this._alpha = v;
if (this.childDepandAlpha) {
this._changeChildAlpha(v);
}
}
get alpha() {
return this._alpha;
}
set width(v) {
this._width = v;
this.refreshAnchorOff();
}
get width() {
return this._width;
}
set height(v) {
this._height = v;
this.refreshAnchorOff();
}
get height() {
return this._height;
}
set anchorX(value) {
this._anchorX = value;
this.refreshAnchorOff();
}
get anchorX() {
return this._anchorX;
}
set anchorY(value) {
this._anchorY = value;
this.refreshAnchorOff();
}
get anchorY() {
return this._anchorY;
}
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) { init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
if (imgObj) { if (imgObj) {
this.img = imgObj; this.img = imgObj;
this.width = this.img.width; this.width = this.img.width;
this.height = this.img.height; this.height = this.img.height;
} }
this.anchorX = anchorX; this.anchorX = anchorX;
this.anchorY = anchorY; this.anchorY = anchorY;
} }
setShowRect(rect) { setShowRect(rect) {
this._showRect = rect; this._showRect = rect;
} }
setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') { setShadow(offX, offY, blur, color = "rgba(0, 0, 0, 0.3)") {
this._shadowFlag = true; this._shadowFlag = true;
this._shadowColor = color; this._shadowColor = color;
this._shadowOffsetX = offX; this._shadowOffsetX = offX;
this._shadowOffsetY = offY; this._shadowOffsetY = offY;
this._shadowBlur = blur; this._shadowBlur = blur;
} }
setRadius(r) { setRadius(r) {
this._radius = r; this._radius = r;
} }
update($event = null) { update($event = null) {
if (!this.visible && this.childDepandVisible) { if (!this.visible && this.childDepandVisible) {
return; return;
} }
this.draw(); this.draw();
} }
draw() { draw() {
this.ctx.save(); this.ctx.save();
this.drawInit(); this.drawInit();
...@@ -133,15 +155,12 @@ export class MySprite extends Sprite { ...@@ -133,15 +155,12 @@ export class MySprite extends Sprite {
this.updateChildren(); this.updateChildren();
this.ctx.restore(); this.ctx.restore();
} }
drawInit() { drawInit() {
this.ctx.translate(this.x, this.y); this.ctx.translate(this.x, this.y);
this.ctx.rotate(this.rotation * Math.PI / 180); this.ctx.rotate((this.rotation * Math.PI) / 180);
this.ctx.scale(this.scaleX, this.scaleY); this.ctx.scale(this.scaleX, this.scaleY);
...@@ -149,9 +168,6 @@ export class MySprite extends Sprite { ...@@ -149,9 +168,6 @@ export class MySprite extends Sprite {
this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0); this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0);
// //
// if (this._radius) { // if (this._radius) {
// //
...@@ -167,15 +183,10 @@ export class MySprite extends Sprite { ...@@ -167,15 +183,10 @@ export class MySprite extends Sprite {
// //
// this.ctx.clip(); // this.ctx.clip();
// } // }
} }
drawSelf() { drawSelf() {
if (this._shadowFlag) { if (this._shadowFlag) {
this.ctx.shadowOffsetX = this._shadowOffsetX; this.ctx.shadowOffsetX = this._shadowOffsetX;
this.ctx.shadowOffsetY = this._shadowOffsetY; this.ctx.shadowOffsetY = this._shadowOffsetY;
this.ctx.shadowBlur = this._shadowBlur; this.ctx.shadowBlur = this._shadowBlur;
...@@ -187,25 +198,30 @@ export class MySprite extends Sprite { ...@@ -187,25 +198,30 @@ export class MySprite extends Sprite {
this.ctx.shadowColor = null; this.ctx.shadowColor = null;
} }
if (this.img) { if (this.img) {
if (this._showRect) { if (this._showRect) {
const rect = this._showRect; const rect = this._showRect;
this.ctx.drawImage(this.img, rect.x, rect.y, rect.width, rect.height, this._offX, this._offY + rect.y, this.width, rect.height); this.ctx.drawImage(
this.img,
rect.x,
rect.y,
rect.width,
rect.height,
this._offX,
this._offY + rect.y,
this.width,
rect.height
);
} else { } else {
this.ctx.drawImage(this.img, this._offX, this._offY); this.ctx.drawImage(this.img, this._offX, this._offY);
} }
} }
} }
updateChildren() { updateChildren() {
if (this.children.length <= 0) {
if (this.children.length <= 0) { return; } return;
}
for (const child of this.children) { for (const child of this.children) {
if (child === this) { if (child === this) {
...@@ -218,16 +234,13 @@ export class MySprite extends Sprite { ...@@ -218,16 +234,13 @@ export class MySprite extends Sprite {
} }
} }
load(url, anchorX = 0.5, anchorY = 0.5) { load(url, anchorX = 0.5, anchorY = 0.5) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const img = new Image(); const img = new Image();
img.onload = () => resolve(img); img.onload = () => resolve(img);
img.onerror = reject; img.onerror = reject;
img.src = url; img.src = url;
}).then(img => { }).then((img) => {
this.init(img, anchorX, anchorY); this.init(img, anchorX, anchorY);
return img; return img;
}); });
...@@ -244,11 +257,9 @@ export class MySprite extends Sprite { ...@@ -244,11 +257,9 @@ export class MySprite extends Sprite {
return a._z - b._z; return a._z - b._z;
}); });
if (this.childDepandAlpha) { if (this.childDepandAlpha) {
child.alpha = this.alpha; child.alpha = this.alpha;
} }
} }
removeChild(child) { removeChild(child) {
const index = this.children.indexOf(child); const index = this.children.indexOf(child);
...@@ -262,7 +273,7 @@ export class MySprite extends Sprite { ...@@ -262,7 +273,7 @@ export class MySprite extends Sprite {
if (this.children[i]) { if (this.children[i]) {
if (this.children[i] !== this) { if (this.children[i] !== this) {
this.children.splice(i, 1); this.children.splice(i, 1);
i --; i--;
} }
} }
} }
...@@ -276,50 +287,6 @@ export class MySprite extends Sprite { ...@@ -276,50 +287,6 @@ export class MySprite extends Sprite {
} }
} }
set btimapFlag(v) {
this._bitmapFlag = v;
}
get btimapFlag() {
return this._bitmapFlag;
}
set alpha(v) {
this._alpha = v;
if (this.childDepandAlpha) {
this._changeChildAlpha(v);
}
}
get alpha() {
return this._alpha;
}
set width(v) {
this._width = v;
this.refreshAnchorOff();
}
get width() {
return this._width;
}
set height(v) {
this._height = v;
this.refreshAnchorOff();
}
get height() {
return this._height;
}
set anchorX(value) {
this._anchorX = value;
this.refreshAnchorOff();
}
get anchorX() {
return this._anchorX;
}
set anchorY(value) {
this._anchorY = value;
this.refreshAnchorOff();
}
get anchorY() {
return this._anchorY;
}
refreshAnchorOff() { refreshAnchorOff() {
this._offX = -this._width * this.anchorX; this._offX = -this._width * this.anchorX;
this._offY = -this._height * this.anchorY; this._offY = -this._height * this.anchorY;
...@@ -329,11 +296,8 @@ export class MySprite extends Sprite { ...@@ -329,11 +296,8 @@ export class MySprite extends Sprite {
this.scaleX = this.scaleY = value; this.scaleX = this.scaleY = value;
} }
getBoundingBox() { getBoundingBox() {
const getParentData = (item) => { const getParentData = (item) => {
let px = item.x; let px = item.x;
let py = item.y; let py = item.y;
...@@ -341,7 +305,6 @@ export class MySprite extends Sprite { ...@@ -341,7 +305,6 @@ export class MySprite extends Sprite {
let sy = item.scaleY; let sy = item.scaleY;
const parent = item.parent; const parent = item.parent;
if (parent) { if (parent) {
const obj = getParentData(parent); const obj = getParentData(parent);
const _x = obj.px; const _x = obj.px;
...@@ -354,64 +317,50 @@ export class MySprite extends Sprite { ...@@ -354,64 +317,50 @@ export class MySprite extends Sprite {
sx *= _sx; sx *= _sx;
sy *= _sy; sy *= _sy;
} }
return {px, py, sx, sy}; return { px, py, sx, sy };
}; };
const data = getParentData(this); const data = getParentData(this);
const x = data.px + this._offX * Math.abs(data.sx); const x = data.px + this._offX * Math.abs(data.sx);
const y = data.py + this._offY * Math.abs(data.sy); const y = data.py + this._offY * Math.abs(data.sy);
const width = this.width * Math.abs(data.sx); const width = this.width * Math.abs(data.sx);
const height = this.height * Math.abs(data.sy); const height = this.height * Math.abs(data.sy);
return {x, y, width, height}; return { x, y, width, height };
} }
} }
export class RoundSprite extends MySprite { export class RoundSprite extends MySprite {
_newCtx; _newCtx;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) { init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
if (imgObj) { if (imgObj) {
this.img = imgObj; this.img = imgObj;
this.width = this.img.width; this.width = this.img.width;
this.height = this.img.height; this.height = this.img.height;
} }
this.anchorX = anchorX; this.anchorX = anchorX;
this.anchorY = anchorY; this.anchorY = anchorY;
const canvas = window['curCanvas']; const canvas = window["curCanvas"];
const w = canvas.nativeElement.width; const w = canvas.nativeElement.width;
const h = canvas.nativeElement.height; const h = canvas.nativeElement.height;
this._offCanvas = document.createElement("canvas");
this._offCanvas = document.createElement('canvas');
this._offCanvas.width = w; this._offCanvas.width = w;
this._offCanvas.height = h; this._offCanvas.height = h;
this._offCtx = this._offCanvas.getContext('2d'); this._offCtx = this._offCanvas.getContext("2d");
// this._newCtx = this.ctx; // this._newCtx = this.ctx;
// this.ctx = this._offCtx; // this.ctx = this._offCtx;
} }
drawSelf() { drawSelf() {
// //
// if (this._shadowFlag) { // if (this._shadowFlag) {
...@@ -427,9 +376,7 @@ export class RoundSprite extends MySprite { ...@@ -427,9 +376,7 @@ export class RoundSprite extends MySprite {
// this.ctx.shadowColor = null; // this.ctx.shadowColor = null;
// } // }
if (this._radius) { if (this._radius) {
const r = this._radius; const r = this._radius;
const w = this.width; const w = this.width;
const h = this.height; const h = this.height;
...@@ -445,45 +392,32 @@ export class RoundSprite extends MySprite { ...@@ -445,45 +392,32 @@ export class RoundSprite extends MySprite {
this._offCtx.clip(); this._offCtx.clip();
} }
if (this.img) { if (this.img) {
this._offCtx.drawImage(this.img, 0, 0); this._offCtx.drawImage(this.img, 0, 0);
this.ctx.drawImage(this._offCanvas,this._offX, this._offX); this.ctx.drawImage(this._offCanvas, this._offX, this._offX);
} }
} }
} }
export class ColorSpr extends MySprite { export class ColorSpr extends MySprite {
r = 0; r = 0;
g = 0; g = 0;
b = 0; b = 0;
createGSCanvas() { createGSCanvas() {
if (!this.img) { if (!this.img) {
return; return;
} }
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
if (rect.width <= 1 || rect.height <= 1) { if (rect.width <= 1 || rect.height <= 1) {
return; return;
} }
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height); const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for ( let i = 0; i < c.height; i++) { for (let i = 0; i < c.height; i++) {
for ( let j = 0; j < c.width; j++) { for (let j = 0; j < c.width; j++) {
const x = i * 4 * c.width + j * 4;
const x = (i * 4) * c.width + ( j * 4 );
const r = c.data[x]; const r = c.data[x];
const g = c.data[x + 1]; const g = c.data[x + 1];
const b = c.data[x + 2]; const b = c.data[x + 2];
...@@ -492,8 +426,6 @@ export class ColorSpr extends MySprite { ...@@ -492,8 +426,6 @@ export class ColorSpr extends MySprite {
c.data[x + 1] = this.g; c.data[x + 1] = this.g;
c.data[x + 2] = this.b; c.data[x + 2] = this.b;
// c.data[x] = c.data[x + 1] = c.data[x + 2] = (r + g + b) / 3 ; // c.data[x] = c.data[x + 1] = c.data[x + 2] = (r + g + b) / 3 ;
// // c.data[x + 3] = 255; // // c.data[x + 3] = 255;
} }
...@@ -502,34 +434,26 @@ export class ColorSpr extends MySprite { ...@@ -502,34 +434,26 @@ export class ColorSpr extends MySprite {
this.ctx.putImageData(c, rect.x, rect.y, 0, 0, rect.width, rect.height); this.ctx.putImageData(c, rect.x, rect.y, 0, 0, rect.width, rect.height);
} }
drawSelf() { drawSelf() {
super.drawSelf(); super.drawSelf();
this.createGSCanvas(); this.createGSCanvas();
} }
} }
export class GrayscaleSpr extends MySprite { export class GrayscaleSpr extends MySprite {
grayScale = 120; grayScale = 120;
createGSCanvas() { createGSCanvas() {
if (!this.img) { if (!this.img) {
return; return;
} }
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height); const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for ( let i = 0; i < c.height; i++) { for (let i = 0; i < c.height; i++) {
for ( let j = 0; j < c.width; j++) { for (let j = 0; j < c.width; j++) {
const x = i * 4 * c.width + j * 4;
const x = (i * 4) * c.width + ( j * 4 );
const r = c.data[x]; const r = c.data[x];
const g = c.data[x + 1]; const g = c.data[x + 1];
const b = c.data[x + 2]; const b = c.data[x + 2];
...@@ -543,35 +467,24 @@ export class GrayscaleSpr extends MySprite { ...@@ -543,35 +467,24 @@ export class GrayscaleSpr extends MySprite {
this.ctx.putImageData(c, rect.x, rect.y, 0, 0, rect.width, rect.height); this.ctx.putImageData(c, rect.x, rect.y, 0, 0, rect.width, rect.height);
} }
drawSelf() { drawSelf() {
super.drawSelf(); super.drawSelf();
this.createGSCanvas(); this.createGSCanvas();
} }
} }
export class BitMapLabel extends MySprite { export class BitMapLabel extends MySprite {
labelArr; labelArr;
baseUrl; baseUrl;
setText(data, text) { setText(data, text) {
this.labelArr = []; this.labelArr = [];
const labelArr = []; const labelArr = [];
const tmpArr = text.split(''); const tmpArr = text.split("");
let totalW = 0; let totalW = 0;
let h = 0; let h = 0;
for (const tmp of tmpArr) { for (const tmp of tmpArr) {
const label = new MySprite(this.ctx); const label = new MySprite(this.ctx);
label.init(data[tmp], 0); label.init(data[tmp], 0);
this.addChild(label); this.addChild(label);
...@@ -581,7 +494,6 @@ export class BitMapLabel extends MySprite { ...@@ -581,7 +494,6 @@ export class BitMapLabel extends MySprite {
h = label.height; h = label.height;
} }
this.width = totalW; this.width = totalW;
this.height = h; this.height = h;
...@@ -593,24 +505,20 @@ export class BitMapLabel extends MySprite { ...@@ -593,24 +505,20 @@ export class BitMapLabel extends MySprite {
this.labelArr = labelArr; this.labelArr = labelArr;
} }
} }
export class Label extends MySprite { export class Label extends MySprite {
private _text: string; private _text: string;
// fontSize:String = '40px'; // fontSize:String = '40px';
fontName = 'Verdana'; fontName = "Verdana";
textAlign = 'left'; textAlign = "left";
fontSize = 40; fontSize = 40;
fontColor = '#000000'; fontColor = "#000000";
fontWeight = 900; fontWeight = 900;
_maxWidth; _maxWidth;
outline = 0; outline = 0;
outlineColor = '#ffffff'; outlineColor = "#ffffff";
// _shadowFlag = false; // _shadowFlag = false;
// _shadowColor; // _shadowColor;
// _shadowOffsetX; // _shadowOffsetX;
...@@ -626,7 +534,6 @@ export class Label extends MySprite { ...@@ -626,7 +534,6 @@ export class Label extends MySprite {
this.init(); this.init();
} }
get text(): string { get text(): string {
return this._text; return this._text;
} }
...@@ -637,12 +544,11 @@ export class Label extends MySprite { ...@@ -637,12 +544,11 @@ export class Label extends MySprite {
} }
refreshSize() { refreshSize() {
this.ctx.save(); this.ctx.save();
this.ctx.font = `${this.fontSize * this.scaleX}px ${this.fontName}`; this.ctx.font = `${this.fontSize * this.scaleX}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign; this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle'; this.ctx.textBaseline = "middle";
this.ctx.fontWeight = this.fontWeight; this.ctx.fontWeight = this.fontWeight;
this._width = this.ctx.measureText(this.text).width; this._width = this.ctx.measureText(this.text).width;
...@@ -650,11 +556,9 @@ export class Label extends MySprite { ...@@ -650,11 +556,9 @@ export class Label extends MySprite {
this.refreshAnchorOff(); this.refreshAnchorOff();
this.ctx.restore(); this.ctx.restore();
} }
setMaxSize(w) { setMaxSize(w) {
this._maxWidth = w; this._maxWidth = w;
this.refreshSize(); this.refreshSize();
if (this.width >= w) { if (this.width >= w) {
...@@ -664,7 +568,6 @@ export class Label extends MySprite { ...@@ -664,7 +568,6 @@ export class Label extends MySprite {
} }
show(callBack = null) { show(callBack = null) {
this.visible = true; this.visible = true;
if (this.alpha >= 1) { if (this.alpha >= 1) {
...@@ -682,23 +585,20 @@ export class Label extends MySprite { ...@@ -682,23 +585,20 @@ export class Label extends MySprite {
.start(); // Start the tween immediately. .start(); // Start the tween immediately.
} }
setOutline(width = 5, color = '#ffffff') { setOutline(width = 5, color = "#ffffff") {
this._outlineFlag = true; this._outlineFlag = true;
this._outLineWidth = width; this._outLineWidth = width;
this._outLineColor = color; this._outLineColor = color;
} }
drawText() { drawText() {
if (!this.text) {
return;
if (!this.text) { return; } }
this.ctx.font = `${this.fontSize}px ${this.fontName}`; this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign; this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle'; this.ctx.textBaseline = "middle";
this.ctx.fontWeight = this.fontWeight; this.ctx.fontWeight = this.fontWeight;
if (this._outlineFlag) { if (this._outlineFlag) {
...@@ -709,56 +609,45 @@ export class Label extends MySprite { ...@@ -709,56 +609,45 @@ export class Label extends MySprite {
this.ctx.fillStyle = this.fontColor; this.ctx.fillStyle = this.fontColor;
if (this.outline > 0) { if (this.outline > 0) {
this.ctx.lineWidth = this.outline; this.ctx.lineWidth = this.outline;
this.ctx.strokeStyle = this.outlineColor; this.ctx.strokeStyle = this.outlineColor;
this.ctx.strokeText(this.text, 0, 0); this.ctx.strokeText(this.text, 0, 0);
} }
this.ctx.fillText(this.text, 0, 0); this.ctx.fillText(this.text, 0, 0);
} }
drawSelf() { drawSelf() {
super.drawSelf(); super.drawSelf();
this.drawText(); this.drawText();
} }
} }
export class RichTextOld extends Label { export class RichTextOld extends Label {
textArr = []; textArr = [];
fontSize = 40; fontSize = 40;
setText(text: string, words) { setText(text: string, words) {
let newText = text; let newText = text;
for (const word of words) { for (const word of words) {
const re = new RegExp(word, "g");
const re = new RegExp(word, 'g'); newText = newText.replace(re, `#${word}#`);
newText = newText.replace( re, `#${word}#`);
// newText = newText.replace(word, `#${word}#`); // newText = newText.replace(word, `#${word}#`);
} }
this.textArr = newText.split('#'); this.textArr = newText.split("#");
this.text = newText; this.text = newText;
// this.setSize(); // this.setSize();
} }
refreshSize() { refreshSize() {
this.ctx.save(); this.ctx.save();
this.ctx.font = `${this.fontSize}px ${this.fontName}`; this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign; this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle'; this.ctx.textBaseline = "middle";
this.ctx.fontWeight = this.fontWeight; this.ctx.fontWeight = this.fontWeight;
let curX = 0; let curX = 0;
...@@ -772,12 +661,9 @@ export class RichTextOld extends Label { ...@@ -772,12 +661,9 @@ export class RichTextOld extends Label {
this.refreshAnchorOff(); this.refreshAnchorOff();
this.ctx.restore(); this.ctx.restore();
} }
show(callBack = null) { show(callBack = null) {
// console.log(' in show '); // console.log(' in show ');
this.visible = true; this.visible = true;
// this.alpha = 0; // this.alpha = 0;
...@@ -791,59 +677,44 @@ export class RichTextOld extends Label { ...@@ -791,59 +677,44 @@ export class RichTextOld extends Label {
} }
}) })
.start(); // Start the tween immediately. .start(); // Start the tween immediately.
} }
drawText() { drawText() {
// console.log('in drawText', this.text); // console.log('in drawText', this.text);
if (!this.text) { return; } if (!this.text) {
return;
}
this.ctx.font = `${this.fontSize}px ${this.fontName}`; this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign; this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle'; this.ctx.textBaseline = "middle";
this.ctx.fontWeight = 900; this.ctx.fontWeight = 900;
this.ctx.lineWidth = 5; this.ctx.lineWidth = 5;
this.ctx.strokeStyle = '#ffffff'; this.ctx.strokeStyle = "#ffffff";
// this.ctx.strokeText(this.text, 0, 0); // this.ctx.strokeText(this.text, 0, 0);
this.ctx.fillStyle = '#000000'; this.ctx.fillStyle = "#000000";
// this.ctx.fillText(this.text, 0, 0); // this.ctx.fillText(this.text, 0, 0);
let curX = 0; let curX = 0;
for (let i = 0; i < this.textArr.length; i++) { for (let i = 0; i < this.textArr.length; i++) {
const w = this.ctx.measureText(this.textArr[i]).width; const w = this.ctx.measureText(this.textArr[i]).width;
if ((i + 1) % 2 === 0) { if ((i + 1) % 2 === 0) {
this.ctx.fillStyle = '#c8171e'; this.ctx.fillStyle = "#c8171e";
} else { } else {
this.ctx.fillStyle = '#000000'; this.ctx.fillStyle = "#000000";
} }
this.ctx.fillText(this.textArr[i], curX, 0); this.ctx.fillText(this.textArr[i], curX, 0);
curX += w; curX += w;
} }
} }
} }
export class RichText extends Label { export class RichText extends Label {
disH = 30; disH = 30;
constructor(ctx?: any) { constructor(ctx?: any) {
...@@ -852,82 +723,67 @@ export class RichText extends Label { ...@@ -852,82 +723,67 @@ export class RichText extends Label {
// this.dataArr = dataArr; // this.dataArr = dataArr;
} }
drawText() { drawText() {
if (!this.text) { if (!this.text) {
return; return;
} }
this.ctx.font = `${this.fontSize}px ${this.fontName}`; this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign; this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle'; this.ctx.textBaseline = "middle";
this.ctx.fontWeight = this.fontWeight; this.ctx.fontWeight = this.fontWeight;
this.ctx.fillStyle = this.fontColor; this.ctx.fillStyle = this.fontColor;
const selfW = this.width * this.scaleX; const selfW = this.width * this.scaleX;
const chr = this.text.split(" ");
const chr = this.text.split(' '); let temp = "";
let temp = '';
const row = []; const row = [];
const w = selfW - 80; const w = selfW - 80;
const disH = (this.fontSize + this.disH) * this.scaleY; const disH = (this.fontSize + this.disH) * this.scaleY;
for (const c of chr) { for (const c of chr) {
if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + (c)).width <= w) { if (
temp += ' ' + c; this.ctx.measureText(temp).width < w &&
this.ctx.measureText(temp + c).width <= w
) {
temp += " " + c;
} else { } else {
row.push(temp); row.push(temp);
temp = ' ' + c; temp = " " + c;
} }
} }
row.push(temp); row.push(temp);
const x = 0; const x = 0;
const y = -row.length * disH / 2; const y = (-row.length * disH) / 2;
// for (let b = 0 ; b < row.length; b++) { // for (let b = 0 ; b < row.length; b++) {
// this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20 // this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
// } // }
if (this._outlineFlag) { if (this._outlineFlag) {
this.ctx.lineWidth = this._outLineWidth; this.ctx.lineWidth = this._outLineWidth;
this.ctx.strokeStyle = this._outLineColor; this.ctx.strokeStyle = this._outLineColor;
for (let b = 0 ; b < row.length; b++) { for (let b = 0; b < row.length; b++) {
this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20 this.ctx.strokeText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
} }
// this.ctx.strokeText(this.text, 0, 0); // this.ctx.strokeText(this.text, 0, 0);
} }
// this.ctx.fillStyle = '#ff7600'; // this.ctx.fillStyle = '#ff7600';
for (let b = 0 ; b < row.length; b++) { for (let b = 0; b < row.length; b++) {
this.ctx.fillText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20 this.ctx.fillText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
} }
} }
drawSelf() { drawSelf() {
super.drawSelf(); super.drawSelf();
this.drawText(); this.drawText();
} }
} }
export class LineRect extends MySprite { export class LineRect extends MySprite {
lineColor = "#ffffff";
lineColor = '#ffffff';
lineWidth = 10; lineWidth = 10;
setSize(w, h) { setSize(w, h) {
...@@ -936,7 +792,6 @@ export class LineRect extends MySprite { ...@@ -936,7 +792,6 @@ export class LineRect extends MySprite {
} }
drawLine() { drawLine() {
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.moveTo(this._offX, this._offY); this.ctx.moveTo(this._offX, this._offY);
this.ctx.lineTo(this._offX + this.width, this._offY); this.ctx.lineTo(this._offX + this.width, this._offY);
...@@ -950,20 +805,16 @@ export class LineRect extends MySprite { ...@@ -950,20 +805,16 @@ export class LineRect extends MySprite {
this.ctx.strokeStyle = this.lineColor; // "#ffffff"; this.ctx.strokeStyle = this.lineColor; // "#ffffff";
this.ctx.stroke(); this.ctx.stroke();
} }
drawSelf() { drawSelf() {
super.drawSelf(); super.drawSelf();
this.drawLine(); this.drawLine();
} }
} }
export class ShapeRect extends MySprite { export class ShapeRect extends MySprite {
fillColor = "#FF0000";
fillColor = '#FF0000';
setSize(w, h) { setSize(w, h) {
this.width = w; this.width = w;
...@@ -974,33 +825,25 @@ export class ShapeRect extends MySprite { ...@@ -974,33 +825,25 @@ export class ShapeRect extends MySprite {
} }
drawShape() { drawShape() {
this.ctx.fillStyle = this.fillColor; this.ctx.fillStyle = this.fillColor;
this.ctx.fillRect(this._offX, this._offY, this.width, this.height); this.ctx.fillRect(this._offX, this._offY, this.width, this.height);
} }
drawSelf() { drawSelf() {
super.drawSelf(); super.drawSelf();
this.drawShape(); this.drawShape();
} }
} }
export class Line extends MySprite { export class Line extends MySprite {
lineWidth = 5; lineWidth = 5;
lineColor = '#000000'; lineColor = "#000000";
_pointArr = []; _pointArr = [];
roundFlag = true; roundFlag = true;
_pointS = 1; _pointS = 1;
imgObj; imgObj;
bitMap; bitMap;
_offCtx; _offCtx;
...@@ -1009,28 +852,24 @@ export class Line extends MySprite { ...@@ -1009,28 +852,24 @@ export class Line extends MySprite {
lastPointIndex = 0; lastPointIndex = 0;
init() { init() {
const canvas = window["curCanvas"];
const canvas = window['curCanvas'];
const w = canvas.nativeElement.width; const w = canvas.nativeElement.width;
const h = canvas.nativeElement.height; const h = canvas.nativeElement.height;
console.log('w: ', w); console.log("w: ", w);
console.log('h: ', h); console.log("h: ", h);
this._offCanvas = document.createElement("canvas");
this._offCanvas = document.createElement('canvas');
this._offCanvas.width = w; this._offCanvas.width = w;
this._offCanvas.height = h; this._offCanvas.height = h;
// this._offCanvas = _offCanvas; // this._offCanvas = _offCanvas;
// this._offCtx = this._offCanvas.getContext('2d'); // this._offCtx = this._offCanvas.getContext('2d');
// this._offCanvas = new OffscreenCanvas(w, h); // this._offCanvas = new OffscreenCanvas(w, h);
this._offCtx = this._offCanvas.getContext('2d'); this._offCtx = this._offCanvas.getContext("2d");
} }
addPoint(x, y) { addPoint(x, y) {
this._pointArr.push([x, y]); this._pointArr.push([x, y]);
if (this._pointArr.length < 2) { if (this._pointArr.length < 2) {
...@@ -1049,9 +888,7 @@ export class Line extends MySprite { ...@@ -1049,9 +888,7 @@ export class Line extends MySprite {
// context.stroke(); // context.stroke();
// //
// //
// this.bitMap = this._offCanvas.transferToImageBitmap(); // this.bitMap = this._offCanvas.transferToImageBitmap();
// const tmpLine = new MySprite(this._offCtx); // const tmpLine = new MySprite(this._offCtx);
// tmpLine.init(this.imgObj); // tmpLine.init(this.imgObj);
...@@ -1068,11 +905,9 @@ export class Line extends MySprite { ...@@ -1068,11 +905,9 @@ export class Line extends MySprite {
// tmpLine.rotation = angle; // tmpLine.rotation = angle;
// //
// this.addChild(tmpLine); // this.addChild(tmpLine);
} }
setPointArr(arr, imgObj) { setPointArr(arr, imgObj) {
this.removeChildren(); this.removeChildren();
if (arr.length < 2) { if (arr.length < 2) {
...@@ -1082,7 +917,6 @@ export class Line extends MySprite { ...@@ -1082,7 +917,6 @@ export class Line extends MySprite {
let p1 = arr[0]; let p1 = arr[0];
let p2; let p2;
for (let i = 1; i < arr.length; i++) { for (let i = 1; i < arr.length; i++) {
p2 = arr[i]; p2 = arr[i];
const tmpLine = new MySprite(); const tmpLine = new MySprite();
...@@ -1094,7 +928,7 @@ export class Line extends MySprite { ...@@ -1094,7 +928,7 @@ export class Line extends MySprite {
const disH = getPosDistance(p1[0], p1[1], p2[0], p2[1]); const disH = getPosDistance(p1[0], p1[1], p2[0], p2[1]);
tmpLine.scaleX = this.lineWidth / tmpLine.width; tmpLine.scaleX = this.lineWidth / tmpLine.width;
tmpLine.scaleY = disH / tmpLine.height * 1.1; tmpLine.scaleY = (disH / tmpLine.height) * 1.1;
const angle = getAngleByPos(p1[0], p1[1], p2[0], p2[1]); const angle = getAngleByPos(p1[0], p1[1], p2[0], p2[1]);
tmpLine.rotation = angle; tmpLine.rotation = angle;
...@@ -1105,25 +939,22 @@ export class Line extends MySprite { ...@@ -1105,25 +939,22 @@ export class Line extends MySprite {
} }
} }
drawLine() { drawLine() {
if (this._pointArr.length < 2) { if (this._pointArr.length < 2) {
return; return;
} }
const curMaxPointIndex = this._pointArr.length - 1; const curMaxPointIndex = this._pointArr.length - 1;
if (curMaxPointIndex > this.lastPointIndex) { if (curMaxPointIndex > this.lastPointIndex) {
const arr = this._pointArr; const arr = this._pointArr;
const context = this._offCtx; const context = this._offCtx;
context.moveTo (arr[this.lastPointIndex][0] * this._pointS, arr[this.lastPointIndex][1] * this._pointS); // 设置起点状态 context.moveTo(
arr[this.lastPointIndex][0] * this._pointS,
arr[this.lastPointIndex][1] * this._pointS
); // 设置起点状态
for (let i = this.lastPointIndex + 1; i < arr.length; i++) { for (let i = this.lastPointIndex + 1; i < arr.length; i++) {
context.lineTo (arr[i][0] * this._pointS, arr[i][1] * this._pointS); // 设置末端状态 context.lineTo(arr[i][0] * this._pointS, arr[i][1] * this._pointS); // 设置末端状态
} }
if (this.roundFlag) { if (this.roundFlag) {
...@@ -1133,24 +964,19 @@ export class Line extends MySprite { ...@@ -1133,24 +964,19 @@ export class Line extends MySprite {
context.strokeStyle = this.lineColor; context.strokeStyle = this.lineColor;
context.stroke(); context.stroke();
this.lastPointIndex = curMaxPointIndex; this.lastPointIndex = curMaxPointIndex;
// this.bitMap = this._offCanvas.transferToImageBitmap(); // this.bitMap = this._offCanvas.transferToImageBitmap();
} }
// this.ctx.drawImage(this.bitMap, this._offX, this._offY); // this.ctx.drawImage(this.bitMap, this._offX, this._offY);
this.ctx.drawImage(this._offCanvas, this._offX, this._offY); this.ctx.drawImage(this._offCanvas, this._offX, this._offY);
} }
drawSelf() { drawSelf() {
super.drawSelf(); super.drawSelf();
this.drawLine(); this.drawLine();
// if (this.img) { // if (this.img) {
// this.ctx.drawImage(this._offCanvas, 0, 0, this.width, this.height); // this.ctx.drawImage(this._offCanvas, 0, 0, this.width, this.height);
// } // }
...@@ -1159,17 +985,13 @@ export class Line extends MySprite { ...@@ -1159,17 +985,13 @@ export class Line extends MySprite {
// this.bitMap = this._offCanvas.transferToImageBitmap(); // this.bitMap = this._offCanvas.transferToImageBitmap();
// this.ctx.drawImage(this.bitMap, 0, 0, this.width, this.height); // this.ctx.drawImage(this.bitMap, 0, 0, this.width, this.height);
// } // }
} }
} }
export class ShapeCircle extends MySprite { export class ShapeCircle extends MySprite {
fillColor = "#FF0000";
fillColor = '#FF0000';
radius = 0; radius = 0;
setRadius(r) { setRadius(r) {
this.anchorX = this.anchorY = 0.5; this.anchorX = this.anchorY = 0.5;
...@@ -1179,7 +1001,6 @@ export class ShapeCircle extends MySprite { ...@@ -1179,7 +1001,6 @@ export class ShapeCircle extends MySprite {
} }
drawShape() { drawShape() {
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.fillStyle = this.fillColor; this.ctx.fillStyle = this.fillColor;
this.ctx.arc(0, 0, this.radius, 0, angleToRadian(360)); this.ctx.arc(0, 0, this.radius, 0, angleToRadian(360));
...@@ -1192,15 +1013,10 @@ export class ShapeCircle extends MySprite { ...@@ -1192,15 +1013,10 @@ export class ShapeCircle extends MySprite {
} }
} }
export class ShapeRectNew extends MySprite { export class ShapeRectNew extends MySprite {
radius = 0; radius = 0;
fillColor = '#ffffff'; fillColor = "#ffffff";
strokeColor = '#000000'; strokeColor = "#000000";
fill = true; fill = true;
stroke = false; stroke = false;
lineWidth = 1; lineWidth = 1;
...@@ -1217,9 +1033,7 @@ export class ShapeRectNew extends MySprite { ...@@ -1217,9 +1033,7 @@ export class ShapeRectNew extends MySprite {
this.lineWidth = lineWidth; this.lineWidth = lineWidth;
} }
drawShape() { drawShape() {
const ctx = this.ctx; const ctx = this.ctx;
const width = this.width; const width = this.width;
const height = this.height; const height = this.height;
...@@ -1229,25 +1043,18 @@ export class ShapeRectNew extends MySprite { ...@@ -1229,25 +1043,18 @@ export class ShapeRectNew extends MySprite {
ctx.beginPath(0); ctx.beginPath(0);
// 从右下角顺时针绘制,弧度从0到1/2PI // 从右下角顺时针绘制,弧度从0到1/2PI
ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2); ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
// 矩形下边线 // 矩形下边线
ctx.lineTo(radius, height); ctx.lineTo(radius, height);
// 左下角圆弧,弧度从1/2PI到PI // 左下角圆弧,弧度从1/2PI到PI
ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI); ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
// 矩形左边线 // 矩形左边线
ctx.lineTo(0, radius); ctx.lineTo(0, radius);
// 左上角圆弧,弧度从PI到3/2PI // 左上角圆弧,弧度从PI到3/2PI
ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2); ctx.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);
// 上边线 // 上边线
ctx.lineTo(width - radius, 0); ctx.lineTo(width - radius, 0);
// 右上角圆弧 // 右上角圆弧
ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2); ctx.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
// 右边线 // 右边线
ctx.lineTo(width, height - radius); ctx.lineTo(width, height - radius);
ctx.closePath(); ctx.closePath();
...@@ -1256,32 +1063,28 @@ export class ShapeRectNew extends MySprite { ...@@ -1256,32 +1063,28 @@ export class ShapeRectNew extends MySprite {
ctx.fillStyle = this.fillColor; ctx.fillStyle = this.fillColor;
ctx.fill(); ctx.fill();
} }
if (this.stroke) { if (this.stroke) {
ctx.lineWidth = this.lineWidth; ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.strokeColor; ctx.strokeStyle = this.strokeColor;
ctx.stroke(); ctx.stroke();
} }
ctx.restore();
ctx.restore();
} }
drawSelf() { drawSelf() {
super.drawSelf(); super.drawSelf();
this.drawShape(); this.drawShape();
} }
} }
export class MyAnimation extends MySprite { export class MyAnimation extends MySprite {
frameArr = []; frameArr = [];
frameIndex = 0; frameIndex = 0;
playFlag = false; playFlag = false;
lastDateTime; lastDateTime;
curDelay = 0; curDelay = 0;
loop = false; loop = false;
playEndFunc; playEndFunc;
delayPerUnit = 1; delayPerUnit = 1;
...@@ -1290,7 +1093,6 @@ export class MyAnimation extends MySprite { ...@@ -1290,7 +1093,6 @@ export class MyAnimation extends MySprite {
reverseFlag = false; reverseFlag = false;
addFrameByImg(img) { addFrameByImg(img) {
const spr = new MySprite(this.ctx); const spr = new MySprite(this.ctx);
spr.init(img); spr.init(img);
this._refreshSize(img); this._refreshSize(img);
...@@ -1304,10 +1106,8 @@ export class MyAnimation extends MySprite { ...@@ -1304,10 +1106,8 @@ export class MyAnimation extends MySprite {
} }
addFrameByUrl(url) { addFrameByUrl(url) {
const spr = new MySprite(this.ctx); const spr = new MySprite(this.ctx);
spr.load(url).then(img => { spr.load(url).then((img) => {
this._refreshSize(img); this._refreshSize(img);
}); });
spr.visible = false; spr.visible = false;
...@@ -1319,7 +1119,6 @@ export class MyAnimation extends MySprite { ...@@ -1319,7 +1119,6 @@ export class MyAnimation extends MySprite {
} }
_refreshSize(img: any) { _refreshSize(img: any) {
if (this.width < img.width) { if (this.width < img.width) {
this.width = img.width; this.width = img.width;
} }
...@@ -1328,8 +1127,6 @@ export class MyAnimation extends MySprite { ...@@ -1328,8 +1127,6 @@ export class MyAnimation extends MySprite {
} }
} }
play() { play() {
this.playFlag = true; this.playFlag = true;
this.lastDateTime = new Date().getTime(); this.lastDateTime = new Date().getTime();
...@@ -1339,13 +1136,11 @@ export class MyAnimation extends MySprite { ...@@ -1339,13 +1136,11 @@ export class MyAnimation extends MySprite {
this.playFlag = false; this.playFlag = false;
} }
replay() { replay() {
this.restartFlag = true; this.restartFlag = true;
this.play(); this.play();
} }
reverse() { reverse() {
this.reverseFlag = !this.reverseFlag; this.reverseFlag = !this.reverseFlag;
this.frameArr.reverse(); this.frameArr.reverse();
...@@ -1353,7 +1148,7 @@ export class MyAnimation extends MySprite { ...@@ -1353,7 +1148,7 @@ export class MyAnimation extends MySprite {
} }
showAllFrame() { showAllFrame() {
for (const frame of this.frameArr ) { for (const frame of this.frameArr) {
frame.alpha = 1; frame.alpha = 1;
} }
} }
...@@ -1364,9 +1159,7 @@ export class MyAnimation extends MySprite { ...@@ -1364,9 +1159,7 @@ export class MyAnimation extends MySprite {
} }
} }
playEnd() { playEnd() {
this.playFlag = false; this.playFlag = false;
this.curDelay = 0; this.curDelay = 0;
...@@ -1383,7 +1176,7 @@ export class MyAnimation extends MySprite { ...@@ -1383,7 +1176,7 @@ export class MyAnimation extends MySprite {
this.frameArr[this.frameIndex].visible = false; this.frameArr[this.frameIndex].visible = false;
} }
this.frameIndex ++; this.frameIndex++;
if (this.frameIndex >= this.frameArr.length) { if (this.frameIndex >= this.frameArr.length) {
if (this.loop) { if (this.loop) {
this.frameIndex = 0; this.frameIndex = 0;
...@@ -1391,21 +1184,16 @@ export class MyAnimation extends MySprite { ...@@ -1391,21 +1184,16 @@ export class MyAnimation extends MySprite {
this.restartFlag = false; this.restartFlag = false;
this.frameIndex = 0; this.frameIndex = 0;
} else { } else {
this.frameIndex -- ; this.frameIndex--;
this.playEnd(); this.playEnd();
return; return;
} }
} }
this.frameArr[this.frameIndex].visible = true; this.frameArr[this.frameIndex].visible = true;
} }
_updateDelay(delay) { _updateDelay(delay) {
this.curDelay += delay; this.curDelay += delay;
if (this.curDelay < this.delayPerUnit) { if (this.curDelay < this.delayPerUnit) {
return; return;
...@@ -1415,7 +1203,9 @@ export class MyAnimation extends MySprite { ...@@ -1415,7 +1203,9 @@ export class MyAnimation extends MySprite {
} }
_updateLastDate() { _updateLastDate() {
if (!this.playFlag) { return; } if (!this.playFlag) {
return;
}
let delay = 0; let delay = 0;
if (this.lastDateTime) { if (this.lastDateTime) {
...@@ -1429,18 +1219,18 @@ export class MyAnimation extends MySprite { ...@@ -1429,18 +1219,18 @@ export class MyAnimation extends MySprite {
super.update($event); super.update($event);
this._updateLastDate(); this._updateLastDate();
} }
} }
// --------=========== util func =============------------- // --------=========== util func =============-------------
export function tweenChange(
export function tweenChange(item, obj, time = 0.8, callBack = null, easing = null, update = null) { item,
obj,
time = 0.8,
callBack = null,
easing = null,
update = null
) {
const tween = new TWEEN.Tween(item).to(obj, time * 1000); const tween = new TWEEN.Tween(item).to(obj, time * 1000);
if (callBack) { if (callBack) {
...@@ -1452,7 +1242,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul ...@@ -1452,7 +1242,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
tween.easing(easing); tween.easing(easing);
} }
if (update) { if (update) {
tween.onUpdate( (a, b) => { tween.onUpdate((a, b) => {
update(a, b); update(a, b);
}); });
} }
...@@ -1461,11 +1251,13 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul ...@@ -1461,11 +1251,13 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
return tween; return tween;
} }
export function rotateItem(
item,
rotation,
export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = null) { time = 0.8,
callBack = null,
easing = null
) {
const tween = new TWEEN.Tween(item).to({ rotation }, time * 1000); const tween = new TWEEN.Tween(item).to({ rotation }, time * 1000);
if (callBack) { if (callBack) {
...@@ -1480,11 +1272,17 @@ export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = ...@@ -1480,11 +1272,17 @@ export function rotateItem(item, rotation, time = 0.8, callBack = null, easing =
tween.start(); tween.start();
} }
export function scaleItem(
item,
export function scaleItem(item, scale, time = 0.8, callBack = null, easing = null) { scale,
time = 0.8,
const tween = new TWEEN.Tween(item).to({ scaleX: scale, scaleY: scale}, time * 1000); callBack = null,
easing = null
) {
const tween = new TWEEN.Tween(item).to(
{ scaleX: scale, scaleY: scale },
time * 1000
);
if (callBack) { if (callBack) {
tween.onComplete(() => { tween.onComplete(() => {
...@@ -1494,15 +1292,19 @@ export function scaleItem(item, scale, time = 0.8, callBack = null, easing = nul ...@@ -1494,15 +1292,19 @@ export function scaleItem(item, scale, time = 0.8, callBack = null, easing = nul
if (easing) { if (easing) {
tween.easing(easing); tween.easing(easing);
} }
tween.start(); tween.start();
return tween; return tween;
} }
export function moveItem(
export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null) { item,
x,
const tween = new TWEEN.Tween(item).to({ x, y}, time * 1000); y,
time = 0.8,
callBack = null,
easing = null
) {
const tween = new TWEEN.Tween(item).to({ x, y }, time * 1000);
if (callBack) { if (callBack) {
tween.onComplete(() => { tween.onComplete(() => {
...@@ -1518,34 +1320,24 @@ export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null) ...@@ -1518,34 +1320,24 @@ export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null)
return tween; return tween;
} }
export function endShow(item, s = 1) { export function endShow(item, s = 1) {
item.scaleX = item.scaleY = 0; item.scaleX = item.scaleY = 0;
item.alpha = 0; item.alpha = 0;
const tween = new TWEEN.Tween(item) const tween = new TWEEN.Tween(item)
.to({ alpha: 1, scaleX: s, scaleY: s }, 800) .to({ alpha: 1, scaleX: s, scaleY: s }, 800)
.easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth. .easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => { .onComplete(() => {})
})
.start(); .start();
} }
export function hideItem(item, time = 0.8, callBack = null, easing = null) { export function hideItem(item, time = 0.8, callBack = null, easing = null) {
if (item.alpha === 0) { if (item.alpha === 0) {
return; return;
} }
const tween = new TWEEN.Tween(item) const tween = new TWEEN.Tween(item)
.to({alpha: 0}, time * 1000) .to({ alpha: 0 }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => { .onComplete(() => {
if (callBack) { if (callBack) {
...@@ -1560,9 +1352,7 @@ export function hideItem(item, time = 0.8, callBack = null, easing = null) { ...@@ -1560,9 +1352,7 @@ export function hideItem(item, time = 0.8, callBack = null, easing = null) {
tween.start(); tween.start();
} }
export function showItem(item, time = 0.8, callBack = null, easing = null) { export function showItem(item, time = 0.8, callBack = null, easing = null) {
if (item.alpha === 1) { if (item.alpha === 1) {
if (callBack) { if (callBack) {
callBack(); callBack();
...@@ -1572,7 +1362,7 @@ export function showItem(item, time = 0.8, callBack = null, easing = null) { ...@@ -1572,7 +1362,7 @@ export function showItem(item, time = 0.8, callBack = null, easing = null) {
item.visible = true; item.visible = true;
const tween = new TWEEN.Tween(item) const tween = new TWEEN.Tween(item)
.to({alpha: 1}, time * 1000) .to({ alpha: 1 }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => { .onComplete(() => {
if (callBack) { if (callBack) {
...@@ -1587,12 +1377,15 @@ export function showItem(item, time = 0.8, callBack = null, easing = null) { ...@@ -1587,12 +1377,15 @@ export function showItem(item, time = 0.8, callBack = null, easing = null) {
tween.start(); tween.start();
} }
export function alphaItem(
export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = null) { item,
alpha,
time = 0.8,
callBack = null,
easing = null
) {
const tween = new TWEEN.Tween(item) const tween = new TWEEN.Tween(item)
.to({alpha}, time * 1000) .to({ alpha }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => { .onComplete(() => {
if (callBack) { if (callBack) {
...@@ -1607,12 +1400,9 @@ export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = nul ...@@ -1607,12 +1400,9 @@ export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = nul
tween.start(); tween.start();
} }
export function showStar(item, time = 0.8, callBack = null, easing = null) { export function showStar(item, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item) const tween = new TWEEN.Tween(item)
.to({alpha: 1, scale: 1}, time * 1000) .to({ alpha: 1, scale: 1 }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => { .onComplete(() => {
if (callBack) { if (callBack) {
...@@ -1627,7 +1417,6 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) { ...@@ -1627,7 +1417,6 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) {
tween.start(); tween.start();
} }
export function randomSortByArr(arr) { export function randomSortByArr(arr) {
if (!arr) { if (!arr) {
return; return;
...@@ -1635,69 +1424,69 @@ export function randomSortByArr(arr) { ...@@ -1635,69 +1424,69 @@ export function randomSortByArr(arr) {
const newArr = []; const newArr = [];
const tmpArr = arr.concat(); const tmpArr = arr.concat();
while (tmpArr.length > 0) { while (tmpArr.length > 0) {
const randomIndex = Math.floor( tmpArr.length * Math.random() ); const randomIndex = Math.floor(tmpArr.length * Math.random());
newArr.push(tmpArr[randomIndex]); newArr.push(tmpArr[randomIndex]);
tmpArr.splice(randomIndex, 1); tmpArr.splice(randomIndex, 1);
} }
return newArr; return newArr;
} }
export function radianToAngle(radian) { export function radianToAngle(radian) {
return radian * 180 / Math.PI; return (radian * 180) / Math.PI;
// 角度 = 弧度 * 180 / Math.PI; // 角度 = 弧度 * 180 / Math.PI;
} }
export function angleToRadian(angle) { export function angleToRadian(angle) {
return angle * Math.PI / 180; return (angle * Math.PI) / 180;
// 弧度= 角度 * Math.PI / 180; // 弧度= 角度 * Math.PI / 180;
} }
export function getPosByAngle(angle, len) { export function getPosByAngle(angle, len) {
const radian = (angle * Math.PI) / 180;
const radian = angle * Math.PI / 180;
const x = Math.sin(radian) * len; const x = Math.sin(radian) * len;
const y = Math.cos(radian) * len; const y = Math.cos(radian) * len;
return {x, y}; return { x, y };
} }
export function getAngleByPos(px, py, mx, my) { export function getAngleByPos(px, py, mx, my) {
const x = Math.abs(px - mx); const x = Math.abs(px - mx);
const y = Math.abs(py - my); const y = Math.abs(py - my);
const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
const cos = y / z; const cos = y / z;
const radina = Math.acos(cos); // 用反三角函数求弧度 const radina = Math.acos(cos); // 用反三角函数求弧度
let angle = Math.floor(180 / (Math.PI / radina) * 100) / 100; // 将弧度转换成角度 let angle = Math.floor((180 / (Math.PI / radina)) * 100) / 100; // 将弧度转换成角度
if (mx > px && my > py) {// 鼠标在第四象限 if (mx > px && my > py) {
// 鼠标在第四象限
angle = 180 - angle; angle = 180 - angle;
} }
if (mx === px && my > py) {// 鼠标在y轴负方向上 if (mx === px && my > py) {
// 鼠标在y轴负方向上
angle = 180; angle = 180;
} }
if (mx > px && my === py) {// 鼠标在x轴正方向上 if (mx > px && my === py) {
// 鼠标在x轴正方向上
angle = 90; angle = 90;
} }
if (mx < px && my > py) {// 鼠标在第三象限 if (mx < px && my > py) {
// 鼠标在第三象限
angle = 180 + angle; angle = 180 + angle;
} }
if (mx < px && my === py) {// 鼠标在x轴负方向 if (mx < px && my === py) {
// 鼠标在x轴负方向
angle = 270; angle = 270;
} }
if (mx < px && my < py) {// 鼠标在第二象限 if (mx < px && my < py) {
// 鼠标在第二象限
angle = 360 - angle; angle = 360 - angle;
} }
// console.log('angle: ', angle); // console.log('angle: ', angle);
return angle; return angle;
} }
export function removeItemFromArr(arr, item) { export function removeItemFromArr(arr, item) {
const index = arr.indexOf(item); const index = arr.indexOf(item);
if (index !== -1) { if (index !== -1) {
...@@ -1705,22 +1494,29 @@ export function removeItemFromArr(arr, item) { ...@@ -1705,22 +1494,29 @@ export function removeItemFromArr(arr, item) {
} }
} }
export function circleMove(
item,
x0,
y0,
time = 2,
export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = 1, callBack = null, easing = null) { addR = 360,
xPer = 1,
yPer = 1,
callBack = null,
easing = null
) {
const r = getPosDistance(item.x, item.y, x0, y0); const r = getPosDistance(item.x, item.y, x0, y0);
let a = getAngleByPos(item.x, item.y, x0, y0); let a = getAngleByPos(item.x, item.y, x0, y0);
a += 90; a += 90;
const obj = {r, a}; const obj = { r, a };
item._circleAngle = a; item._circleAngle = a;
const targetA = a + addR; const targetA = a + addR;
const tween = new TWEEN.Tween(item).to({_circleAngle: targetA}, time * 1000); const tween = new TWEEN.Tween(item).to(
{ _circleAngle: targetA },
time * 1000
);
if (callBack) { if (callBack) {
tween.onComplete(() => { tween.onComplete(() => {
...@@ -1731,14 +1527,13 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = ...@@ -1731,14 +1527,13 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
tween.easing(easing); tween.easing(easing);
} }
tween.onUpdate( (item, progress) => { tween.onUpdate((item, progress) => {
// console.log(item._circleAngle); // console.log(item._circleAngle);
const r = obj.r; const r = obj.r;
const a = item._circleAngle; const a = item._circleAngle;
const x = x0 + r * xPer * Math.cos(a * Math.PI / 180); const x = x0 + r * xPer * Math.cos((a * Math.PI) / 180);
const y = y0 + r * yPer * Math.sin(a * Math.PI / 180); const y = y0 + r * yPer * Math.sin((a * Math.PI) / 180);
item.x = x; item.x = x;
item.y = y; item.y = y;
...@@ -1749,12 +1544,10 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = ...@@ -1749,12 +1544,10 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
tween.start(); tween.start();
} }
export function getPosDistance(sx, sy, ex, ey) { export function getPosDistance(sx, sy, ex, ey) {
const _x = ex - sx; const _x = ex - sx;
const _y = ey - sy; const _y = ey - sy;
const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) ); const len = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2));
return len; return len;
} }
...@@ -1769,24 +1562,30 @@ export function delayCall(callback, second) { ...@@ -1769,24 +1562,30 @@ export function delayCall(callback, second) {
.start(); .start();
} }
export function formatTime(fmt, date) { export function formatTime(fmt, date) {
// "yyyy-MM-dd HH:mm:ss"; // "yyyy-MM-dd HH:mm:ss";
const o = { const o = {
'M+': date.getMonth() + 1, // 月份 "M+": date.getMonth() + 1, // 月份
'd+': date.getDate(), // 日 "d+": date.getDate(), // 日
'h+': date.getHours(), // 小时 "h+": date.getHours(), // 小时
'm+': date.getMinutes(), // 分 "m+": date.getMinutes(), // 分
's+': date.getSeconds(), // 秒 "s+": date.getSeconds(), // 秒
'q+': Math.floor((date.getMonth() + 3) / 3), // 季度 "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
S: date.getMilliseconds() // 毫秒 S: date.getMilliseconds(), // 毫秒
}; };
if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } if (/(y+)/.test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
(date.getFullYear() + "").substr(4 - RegExp.$1.length)
);
}
for (const k in o) { for (const k in o) {
if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) if (new RegExp("(" + k + ")").test(fmt)) {
? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))); fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length === 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
);
} }
} }
return fmt; return fmt;
...@@ -1799,11 +1598,7 @@ export function getMinScale(item, maxLen) { ...@@ -1799,11 +1598,7 @@ export function getMinScale(item, maxLen) {
return minS; return minS;
} }
export function jelly(item, time = 0.7) { export function jelly(item, time = 0.7) {
if (item.jellyTween) { if (item.jellyTween) {
TWEEN.remove(item.jellyTween); TWEEN.remove(item.jellyTween);
} }
...@@ -1819,10 +1614,16 @@ export function jelly(item, time = 0.7) { ...@@ -1819,10 +1614,16 @@ export function jelly(item, time = 0.7) {
return; return;
} }
const data = arr[index]; const data = arr[index];
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => { const t = tweenChange(
index ++; item,
{ scaleX: data[0], scaleY: data[1] },
data[2],
() => {
index++;
run(); run();
}, TWEEN.Easing.Sinusoidal.InOut); },
TWEEN.Easing.Sinusoidal.InOut
);
item.jellyTween = t; item.jellyTween = t;
}; };
...@@ -1834,17 +1635,19 @@ export function jelly(item, time = 0.7) { ...@@ -1834,17 +1635,19 @@ export function jelly(item, time = 0.7) {
[baseSX * 1.0, baseSY * 1.0, t * 2], [baseSX * 1.0, baseSY * 1.0, t * 2],
]; ];
run(); run();
} }
export function showPopParticle(
img,
export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) { pos,
parent,
num = 20,
for (let i = 0; i < num; i ++) { minLen = 40,
maxLen = 80,
showTime = 0.4
) {
for (let i = 0; i < num; i++) {
const particle = new MySprite(); const particle = new MySprite();
particle.init(img); particle.init(img);
particle.x = pos.x; particle.x = pos.x;
...@@ -1866,36 +1669,27 @@ export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen ...@@ -1866,36 +1669,27 @@ export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen
const randomL = minLen + Math.random() * (maxLen - minLen); const randomL = minLen + Math.random() * (maxLen - minLen);
const randomA = 360 * Math.random(); const randomA = 360 * Math.random();
const randomT = getPosByAngle(randomA, randomL); const randomT = getPosByAngle(randomA, randomL);
moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, showTime, () => { moveItem(
particle,
particle.x + randomT.x,
particle.y + randomT.y,
}, TWEEN.Easing.Exponential.Out); showTime,
() => {},
TWEEN.Easing.Exponential.Out
);
// scaleItem(particle, 0, 0.6, () => { // scaleItem(particle, 0, 0.6, () => {
// //
// }); // });
scaleItem(particle, randomS, 0.6, () => { scaleItem(particle, randomS, 0.6, () => {}, TWEEN.Easing.Exponential.Out);
}, TWEEN.Easing.Exponential.Out);
setTimeout(() => { setTimeout(() => {
hideItem(particle, 0.4, () => {}, TWEEN.Easing.Cubic.In);
hideItem(particle, 0.4, () => {
}, TWEEN.Easing.Cubic.In);
}, showTime * 0.5 * 1000); }, showTime * 0.5 * 1000);
} }
} }
export function shake(item, time = 0.5, callback = null, rate = 1) { export function shake(item, time = 0.5, callback = null, rate = 1) {
if (item.shakeTween) { if (item.shakeTween) {
return; return;
} }
...@@ -1907,45 +1701,67 @@ export function shake(item, time = 0.5, callback = null, rate = 1) { ...@@ -1907,45 +1701,67 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
const baseY = item.y; const baseY = item.y;
const easing = TWEEN.Easing.Sinusoidal.InOut; const easing = TWEEN.Easing.Sinusoidal.InOut;
const move4 = () => { const move4 = () => {
moveItem(item, baseX, baseY, time / 4, () => { moveItem(
item,
baseX,
baseY,
time / 4,
() => {
item.shakeTween = false; item.shakeTween = false;
if (callback) { if (callback) {
callback(); callback();
} }
}, easing); },
easing
);
}; };
const move3 = () => { const move3 = () => {
moveItem(item, baseX + offX / 4, baseY + offY / 4, time / 4, () => { moveItem(
item,
baseX + offX / 4,
baseY + offY / 4,
time / 4,
() => {
move4(); move4();
}, easing); },
easing
);
}; };
const move2 = () => { const move2 = () => {
moveItem(item, baseX - offX / 4 * 3, baseY - offY / 4 * 3, time / 4, () => { moveItem(
item,
baseX - (offX / 4) * 3,
baseY - (offY / 4) * 3,
time / 4,
() => {
move3(); move3();
}, easing); },
easing
);
}; };
const move1 = () => { const move1 = () => {
moveItem(item, baseX + offX, baseY + offY, time / 7.5, () => { moveItem(
item,
baseX + offX,
baseY + offY,
time / 7.5,
() => {
move2(); move2();
}, easing); },
easing
);
}; };
move1(); move1();
} }
// --------------- custom class --------------------
// --------------- custom class --------------------
export class HotZoneItem extends MySprite { export class HotZoneItem extends MySprite {
lineDashFlag = false; lineDashFlag = false;
arrow: MySprite; arrow: MySprite;
label: Label; label: Label;
...@@ -1961,8 +1777,8 @@ export class HotZoneItem extends MySprite { ...@@ -1961,8 +1777,8 @@ export class HotZoneItem extends MySprite {
isAnimaStyle = false; isAnimaStyle = false;
rectFillColor = '#ffffff'; rectFillColor = "#ffffff";
rectEdgeColor = '#1bfff7'; rectEdgeColor = "#1bfff7";
public itemName; public itemName;
private _itemType; private _itemType;
...@@ -1979,7 +1795,6 @@ export class HotZoneItem extends MySprite { ...@@ -1979,7 +1795,6 @@ export class HotZoneItem extends MySprite {
this.width = w; this.width = w;
this.height = h; this.height = h;
const rect = new ShapeRect(this.ctx); const rect = new ShapeRect(this.ctx);
rect.x = -w / 2; rect.x = -w / 2;
rect.y = -h / 2; rect.y = -h / 2;
...@@ -1990,19 +1805,16 @@ export class HotZoneItem extends MySprite { ...@@ -1990,19 +1805,16 @@ export class HotZoneItem extends MySprite {
} }
showLabel(text = null) { showLabel(text = null) {
if (!this.label) { if (!this.label) {
this.label = new Label(this.ctx); this.label = new Label(this.ctx);
this.label.anchorY = 0; this.label.anchorY = 0;
this.label.fontSize = 40; this.label.fontSize = 40;
this.label.textAlign = 'center'; this.label.textAlign = "center";
this.addChild(this.label); this.addChild(this.label);
// this.label.scaleX = 1 / this.scaleX; // this.label.scaleX = 1 / this.scaleX;
// this.label.scaleY = 1 / this.scaleY; // this.label.scaleY = 1 / this.scaleY;
this.refreshLabelScale(); this.refreshLabelScale();
} }
if (text) { if (text) {
...@@ -2011,11 +1823,12 @@ export class HotZoneItem extends MySprite { ...@@ -2011,11 +1823,12 @@ export class HotZoneItem extends MySprite {
this.label.text = this.title; this.label.text = this.title;
} }
this.label.visible = true; this.label.visible = true;
} }
hideLabel() { hideLabel() {
if (!this.label) { return; } if (!this.label) {
return;
}
this.label.visible = false; this.label.visible = false;
} }
...@@ -2039,15 +1852,15 @@ export class HotZoneItem extends MySprite { ...@@ -2039,15 +1852,15 @@ export class HotZoneItem extends MySprite {
this.arrow.visible = true; this.arrow.visible = true;
} else { } else {
this.arrow = new MySprite(this.ctx); this.arrow = new MySprite(this.ctx);
this.arrow.load('assets/common/arrow.png', 1, 0); this.arrow.load("assets/common/arrow.png", 1, 0);
this.arrow.setScaleXY(0.06); this.arrow.setScaleXY(0.06);
this.arrowTop = new MySprite(this.ctx); this.arrowTop = new MySprite(this.ctx);
this.arrowTop.load('assets/common/arrow_top.png', 0.5, 0); this.arrowTop.load("assets/common/arrow_top.png", 0.5, 0);
this.arrowTop.setScaleXY(0.06); this.arrowTop.setScaleXY(0.06);
this.arrowRight = new MySprite(this.ctx); this.arrowRight = new MySprite(this.ctx);
this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5); this.arrowRight.load("assets/common/arrow_right.png", 1, 0.5);
this.arrowRight.setScaleXY(0.06); this.arrowRight.setScaleXY(0.06);
} }
...@@ -2055,7 +1868,6 @@ export class HotZoneItem extends MySprite { ...@@ -2055,7 +1868,6 @@ export class HotZoneItem extends MySprite {
} }
hideLineDash() { hideLineDash() {
this.lineDashFlag = false; this.lineDashFlag = false;
if (this.arrow) { if (this.arrow) {
...@@ -2067,11 +1879,13 @@ export class HotZoneItem extends MySprite { ...@@ -2067,11 +1879,13 @@ export class HotZoneItem extends MySprite {
setAnimaStyle(isAnimaStyle) { setAnimaStyle(isAnimaStyle) {
this.isAnimaStyle = isAnimaStyle; this.isAnimaStyle = isAnimaStyle;
console.log('in setAnimaStyle ') console.log("in setAnimaStyle ");
} }
drawArrow() { drawArrow() {
if (!this.arrow) { return; } if (!this.arrow) {
return;
}
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
this.arrow.x = rect.x + rect.width; this.arrow.x = rect.x + rect.width;
...@@ -2079,7 +1893,6 @@ export class HotZoneItem extends MySprite { ...@@ -2079,7 +1893,6 @@ export class HotZoneItem extends MySprite {
this.arrow.update(); this.arrow.update();
if (!this.isAnimaStyle) { if (!this.isAnimaStyle) {
this.arrowTop.x = rect.x + rect.width / 2; this.arrowTop.x = rect.x + rect.width / 2;
this.arrowTop.y = rect.y; this.arrowTop.y = rect.y;
...@@ -2089,15 +1902,11 @@ export class HotZoneItem extends MySprite { ...@@ -2089,15 +1902,11 @@ export class HotZoneItem extends MySprite {
this.arrowRight.y = rect.y + rect.height / 2; this.arrowRight.y = rect.y + rect.height / 2;
this.arrowRight.update(); this.arrowRight.update();
} }
} }
drawFrame() { drawFrame() {
this.ctx.save(); this.ctx.save();
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
const w = rect.width; const w = rect.width;
...@@ -2108,28 +1917,21 @@ export class HotZoneItem extends MySprite { ...@@ -2108,28 +1917,21 @@ export class HotZoneItem extends MySprite {
this.ctx.setLineDash([5, 5]); this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2; this.ctx.lineWidth = 2;
this.ctx.strokeStyle = this.rectEdgeColor; this.ctx.strokeStyle = this.rectEdgeColor;
// this.ctx.fillStyle = '#ffffff';
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.moveTo(x - w / 2, y - h / 2);
this.ctx.moveTo( x - w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y - h / 2); this.ctx.lineTo(x + w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y + h / 2); this.ctx.lineTo(x + w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y + h / 2); this.ctx.lineTo(x - w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y - h / 2); this.ctx.lineTo(x - w / 2, y - h / 2);
// this.ctx.fill(); if(this.showColorMask) {
this.ctx.stroke(); this.ctx.fillStyle = '#FF0';
this.ctx.fill();
}
this.ctx.stroke();
this.ctx.restore(); this.ctx.restore();
} }
draw() { draw() {
...@@ -2137,13 +1939,14 @@ export class HotZoneItem extends MySprite { ...@@ -2137,13 +1939,14 @@ export class HotZoneItem extends MySprite {
if (this.lineDashFlag) { if (this.lineDashFlag) {
this.drawFrame(); this.drawFrame();
if(!this.hideArrow) {
this.drawArrow(); this.drawArrow();
} }
} }
}
} }
export class HotZoneMultRect extends HotZoneItem { export class HotZoneMultRect extends HotZoneItem {
item; item;
drawLine() { drawLine() {
...@@ -2151,34 +1954,26 @@ export class HotZoneMultRect extends HotZoneItem { ...@@ -2151,34 +1954,26 @@ export class HotZoneMultRect extends HotZoneItem {
return; return;
} }
this.ctx.save(); this.ctx.save();
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
const w = rect.width; const w = rect.width;
const h = rect.height; const h = rect.height;
const x = rect.x //+ w / 2; const x = rect.x; //+ w / 2;
const y = rect.y //+ h / 2; const y = rect.y; //+ h / 2;
this.ctx.setLineDash([4, 4]); this.ctx.setLineDash([4, 4]);
this.ctx.lineWidth = 1; this.ctx.lineWidth = 1;
this.ctx.strokeStyle = '#ffa568'; this.ctx.strokeStyle = "#ffa568";
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.moveTo(x + w / 2, y + h / 2);
this.ctx.moveTo( x + w / 2 , y + h / 2 );
this.ctx.lineTo(this.item.x, this.item.y); this.ctx.lineTo(this.item.x, this.item.y);
// this.ctx.fill(); // this.ctx.fill();
this.ctx.stroke(); this.ctx.stroke();
this.ctx.restore(); this.ctx.restore();
} }
draw() { draw() {
super.draw(); super.draw();
...@@ -2189,9 +1984,7 @@ export class HotZoneMultRect extends HotZoneItem { ...@@ -2189,9 +1984,7 @@ export class HotZoneMultRect extends HotZoneItem {
} }
export class HotZoneImg extends MySprite { export class HotZoneImg extends MySprite {
drawFrame() { drawFrame() {
this.ctx.save(); this.ctx.save();
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
...@@ -2202,10 +1995,10 @@ export class HotZoneImg extends MySprite { ...@@ -2202,10 +1995,10 @@ export class HotZoneImg extends MySprite {
this.ctx.setLineDash([5, 5]); this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2; this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7'; this.ctx.strokeStyle = "#1bfff7";
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.moveTo( x - w / 2, y - h / 2); this.ctx.moveTo(x - w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y - h / 2); this.ctx.lineTo(x + w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y + h / 2); this.ctx.lineTo(x + w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y + h / 2); this.ctx.lineTo(x - w / 2, y + h / 2);
...@@ -2213,21 +2006,17 @@ export class HotZoneImg extends MySprite { ...@@ -2213,21 +2006,17 @@ export class HotZoneImg extends MySprite {
// this.ctx.fill(); // this.ctx.fill();
this.ctx.stroke(); this.ctx.stroke();
this.ctx.restore(); this.ctx.restore();
} }
draw() { draw() {
super.draw(); super.draw();
this.drawFrame(); this.drawFrame();
} }
} }
export class HotZoneLabel extends Label { export class HotZoneLabel extends Label {
drawFrame() { drawFrame() {
this.ctx.save(); this.ctx.save();
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
...@@ -2238,10 +2027,10 @@ export class HotZoneLabel extends Label { ...@@ -2238,10 +2027,10 @@ export class HotZoneLabel extends Label {
this.ctx.setLineDash([5, 5]); this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2; this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7'; this.ctx.strokeStyle = "#1bfff7";
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.moveTo( x - w / 2, y - h / 2); this.ctx.moveTo(x - w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y - h / 2); this.ctx.lineTo(x + w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y + h / 2); this.ctx.lineTo(x + w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y + h / 2); this.ctx.lineTo(x - w / 2, y + h / 2);
...@@ -2249,38 +2038,28 @@ export class HotZoneLabel extends Label { ...@@ -2249,38 +2038,28 @@ export class HotZoneLabel extends Label {
// this.ctx.fill(); // this.ctx.fill();
this.ctx.stroke(); this.ctx.stroke();
this.ctx.restore(); this.ctx.restore();
} }
draw() { draw() {
super.draw(); super.draw();
this.drawFrame(); this.drawFrame();
} }
getLabelRect() { getLabelRect() {
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
const width = rect.width / this.scaleX; const width = rect.width / this.scaleX;
const height = this.height * this.scaleY; const height = this.height * this.scaleY;
const x = this.x - width / 2; const x = this.x - width / 2;
const y = this.y - height / 2; const y = this.y - height / 2;
return {width, height, x, y}; return { width, height, x, y };
} }
} }
export class HotZoneAction extends MySprite { export class HotZoneAction extends MySprite {}
}
export class DragItem extends MySprite { export class DragItem extends MySprite {
lineDashFlag = true; lineDashFlag = true;
item; item;
...@@ -2289,18 +2068,15 @@ export class DragItem extends MySprite { ...@@ -2289,18 +2068,15 @@ export class DragItem extends MySprite {
this.anchorY = 0.5; this.anchorY = 0.5;
this.initCenterCircle(); this.initCenterCircle();
} }
setSize(w, h) { setSize(w, h) {
this.anchorX = 0.5; this.anchorX = 0.5;
this.anchorY = 0.5; this.anchorY = 0.5;
this.width = w; this.width = w;
this.height = h; this.height = h;
// const rect = new ShapeRect(this.ctx); // const rect = new ShapeRect(this.ctx);
// rect.x = -w / 2; // rect.x = -w / 2;
// rect.y = -h / 2; // rect.y = -h / 2;
...@@ -2308,14 +2084,12 @@ export class DragItem extends MySprite { ...@@ -2308,14 +2084,12 @@ export class DragItem extends MySprite {
// rect.fillColor = '#000000'; // rect.fillColor = '#000000';
// rect.alpha = 0.1; // rect.alpha = 0.1;
// this.addChild(rect); // this.addChild(rect);
} }
initCenterCircle() { initCenterCircle() {
const circle = new ShapeCircle(this.ctx); const circle = new ShapeCircle(this.ctx);
circle.setRadius(10); circle.setRadius(10);
circle.fillColor = '#ffa568' circle.fillColor = "#ffa568";
this.addChild(circle); this.addChild(circle);
this.width = circle.width; this.width = circle.width;
...@@ -2323,7 +2097,7 @@ export class DragItem extends MySprite { ...@@ -2323,7 +2097,7 @@ export class DragItem extends MySprite {
} }
getPosition() { getPosition() {
return {x: this.x, y: this.y}; return { x: this.x, y: this.y };
} }
drawLine() { drawLine() {
...@@ -2331,70 +2105,51 @@ export class DragItem extends MySprite { ...@@ -2331,70 +2105,51 @@ export class DragItem extends MySprite {
return; return;
} }
this.ctx.save(); this.ctx.save();
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
const w = rect.width; const w = rect.width;
const h = rect.height; const h = rect.height;
const x = rect.x //+ w / 2; const x = rect.x; //+ w / 2;
const y = rect.y //+ h / 2; const y = rect.y; //+ h / 2;
this.ctx.setLineDash([4, 4]); this.ctx.setLineDash([4, 4]);
this.ctx.lineWidth = 1; this.ctx.lineWidth = 1;
this.ctx.strokeStyle = '#ffa568'; this.ctx.strokeStyle = "#ffa568";
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.moveTo(x + w / 2, y + h / 2);
this.ctx.moveTo( x + w / 2 , y + h / 2 );
this.ctx.lineTo(this.item.x, this.item.y); this.ctx.lineTo(this.item.x, this.item.y);
// this.ctx.fill(); // this.ctx.fill();
this.ctx.stroke(); this.ctx.stroke();
this.ctx.restore(); this.ctx.restore();
} }
drawFrame() { drawFrame() {
this.ctx.save(); this.ctx.save();
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
const w = rect.width; const w = rect.width;
const h = rect.height; const h = rect.height;
const x = rect.x //+ w / 2; const x = rect.x; //+ w / 2;
const y = rect.y //+ h / 2; const y = rect.y; //+ h / 2;
this.ctx.setLineDash([4, 4]); this.ctx.setLineDash([4, 4]);
this.ctx.lineWidth = 2; this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#ffa568'; this.ctx.strokeStyle = "#ffa568";
// this.ctx.fillStyle = '#ffffff'; // this.ctx.fillStyle = '#ffffff';
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.moveTo(x - w / 2, y - h / 2);
this.ctx.moveTo( x - w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y - h / 2); this.ctx.lineTo(x + w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y + h / 2); this.ctx.lineTo(x + w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y + h / 2); this.ctx.lineTo(x - w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y - h / 2); this.ctx.lineTo(x - w / 2, y - h / 2);
// this.ctx.fill(); // this.ctx.fill();
this.ctx.stroke(); this.ctx.stroke();
this.ctx.restore(); this.ctx.restore();
} }
draw() { draw() {
...@@ -2409,7 +2164,6 @@ export class DragItem extends MySprite { ...@@ -2409,7 +2164,6 @@ export class DragItem extends MySprite {
} }
export class EditorItem extends MySprite { export class EditorItem extends MySprite {
lineDashFlag = false; lineDashFlag = false;
arrow: MySprite; arrow: MySprite;
label: Label; label: Label;
...@@ -2418,13 +2172,11 @@ export class EditorItem extends MySprite { ...@@ -2418,13 +2172,11 @@ export class EditorItem extends MySprite {
arrowRight; arrowRight;
showLabel(text = null) { showLabel(text = null) {
if (!this.label) { if (!this.label) {
this.label = new Label(this.ctx); this.label = new Label(this.ctx);
this.label.anchorY = 0; this.label.anchorY = 0;
this.label.fontSize = 50; this.label.fontSize = 50;
this.label.textAlign = 'center'; this.label.textAlign = "center";
this.addChild(this.label); this.addChild(this.label);
this.label.setScaleXY(1 / this.scaleX); this.label.setScaleXY(1 / this.scaleX);
} }
...@@ -2435,11 +2187,12 @@ export class EditorItem extends MySprite { ...@@ -2435,11 +2187,12 @@ export class EditorItem extends MySprite {
this.label.text = this.text; this.label.text = this.text;
} }
this.label.visible = true; this.label.visible = true;
} }
hideLabel() { hideLabel() {
if (!this.label) { return; } if (!this.label) {
return;
}
this.label.visible = false; this.label.visible = false;
} }
...@@ -2451,7 +2204,7 @@ export class EditorItem extends MySprite { ...@@ -2451,7 +2204,7 @@ export class EditorItem extends MySprite {
this.arrow.visible = true; this.arrow.visible = true;
} else { } else {
this.arrow = new MySprite(this.ctx); this.arrow = new MySprite(this.ctx);
this.arrow.load('assets/common/arrow.png', 1, 0); this.arrow.load("assets/common/arrow.png", 1, 0);
this.arrow.setScaleXY(0.06); this.arrow.setScaleXY(0.06);
// this.arrowTop = new MySprite(this.ctx); // this.arrowTop = new MySprite(this.ctx);
...@@ -2467,7 +2220,6 @@ export class EditorItem extends MySprite { ...@@ -2467,7 +2220,6 @@ export class EditorItem extends MySprite {
} }
hideLineDash() { hideLineDash() {
this.lineDashFlag = false; this.lineDashFlag = false;
if (this.arrow) { if (this.arrow) {
...@@ -2480,15 +2232,15 @@ export class EditorItem extends MySprite { ...@@ -2480,15 +2232,15 @@ export class EditorItem extends MySprite {
refreshLabelScale() {} refreshLabelScale() {}
drawArrow() { drawArrow() {
if (!this.arrow) {
if (!this.arrow) { return; } return;
}
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
this.arrow.x = rect.x + rect.width; this.arrow.x = rect.x + rect.width;
this.arrow.y = rect.y; this.arrow.y = rect.y;
this.arrow.update(); this.arrow.update();
// this.arrowTop.x = rect.x + rect.width / 2; // this.arrowTop.x = rect.x + rect.width / 2;
// this.arrowTop.y = rect.y; // this.arrowTop.y = rect.y;
// this.arrowTop.update(); // this.arrowTop.update();
...@@ -2499,11 +2251,8 @@ export class EditorItem extends MySprite { ...@@ -2499,11 +2251,8 @@ export class EditorItem extends MySprite {
} }
drawFrame() { drawFrame() {
this.ctx.save(); this.ctx.save();
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
const w = rect.width; const w = rect.width;
...@@ -2513,39 +2262,28 @@ export class EditorItem extends MySprite { ...@@ -2513,39 +2262,28 @@ export class EditorItem extends MySprite {
this.ctx.setLineDash([5, 5]); this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2; this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7'; this.ctx.strokeStyle = "#1bfff7";
// this.ctx.fillStyle = '#ffffff'; // this.ctx.fillStyle = '#ffffff';
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.moveTo(x - w / 2, y - h / 2);
this.ctx.moveTo( x - w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y - h / 2); this.ctx.lineTo(x + w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y + h / 2); this.ctx.lineTo(x + w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y + h / 2); this.ctx.lineTo(x - w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y - h / 2); this.ctx.lineTo(x - w / 2, y - h / 2);
// this.ctx.fill(); // this.ctx.fill();
this.ctx.stroke(); this.ctx.stroke();
this.ctx.restore(); this.ctx.restore();
} }
draw() { draw() {
super.draw(); super.draw();
if (this.lineDashFlag) { if (this.lineDashFlag) {
this.drawFrame(); this.drawFrame();
if(!this.hideArrow) {
this.drawArrow(); this.drawArrow();
} }
} }
}
} }
<div class="p-image-children-editor" style="position: relative;"> <div #hotZoneRef class="p-image-children-editor" style="position: relative; padding-top: 50px;">
<h5 style="margin-left: 2.5%;"> preview: </h5> <h5 style="margin-left: 2.5%;"> preview: </h5>
<div #previewBoxRef class="preview-box" #wrap>
<div class="preview-box" #wrap>
<canvas id="canvas" #canvas></canvas> <canvas id="canvas" #canvas></canvas>
</div> </div>
<div nz-row nzType="flex" nzAlign="middle"> <div nz-row nzType="flex" nzAlign="middle">
<div nz-col nzSpan="5" nzOffset="1"> <div nz-col nzSpan="5" nzOffset="1">
<h5> add background: </h5> <h5> add background: </h5>
<div class="bg-box"> <div class="bg-box">
<app-upload-image-with-preview <app-upload-image-with-preview
[picUrl]="bgItem?.url" [picUrl]="bgItem?.url"
...@@ -20,10 +15,9 @@ ...@@ -20,10 +15,9 @@
</div> </div>
<div nz-col nzSpan="5" nzOffset="1" class="img-box" *ngFor="let it of hotZoneArr; let i = index"> <div nz-col nzSpan="5" nzOffset="1" class="img-box" *ngFor="let it of hotZoneArr; let i = index">
<div <div style="margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px">
style="margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px"> <span style="margin-left: 40%;"> item-{{i + 1}}</span>
<span style="margin-left: 40%;"> item-{{i + 1}}
</span>
<button style="float: right;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)"> <button style="float: right;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)">
X X
</button> </button>
...@@ -35,7 +29,7 @@ ...@@ -35,7 +29,7 @@
<input type="text" nz-input [(ngModel)]="it.itemName" (blur)="saveText(it)" style="margin-left: 20px;"> <input type="text" nz-input [(ngModel)]="it.itemName" (blur)="saveText(it)" style="margin-left: 20px;">
</div> </div>
<div style="margin-bottom: 5px"> <!-- <div style="margin-bottom: 5px">
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)"> <nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)">
<label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label> <label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
<label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label> <label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
...@@ -59,15 +53,12 @@ ...@@ -59,15 +53,12 @@
[audioUrl]="it.audio_url" [audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)" (audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder> ></app-audio-recorder>
</div> -->
</div> </div>
</div>
</div> </div>
<div nz-col nzSpan="5" nzOffset="1"> <div nz-col nzSpan="5" nzOffset="1">
<div class="bg-box"> <div class="bg-box">
<button nz-button nzType="dashed" (click)="addBtnClick()" <button nz-button nzType="dashed" (click)="addBtnClick()"
class="add-btn"> class="add-btn">
...@@ -76,49 +67,81 @@ ...@@ -76,49 +67,81 @@
Add hot zone Add hot zone
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<nz-divider></nz-divider> <nz-divider></nz-divider>
<div class="save-box"> <div class="save-box">
<label nz-checkbox [(ngModel)]="inAdjustMode">微调模式</label>
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round" <button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()" > (click)="saveClick()" >
<i nz-icon nzType="save"></i> <i nz-icon nzType="save"></i>
Save Save
</button> </button>
</div> </div>
<div *ngIf="inAdjustMode" style="position: absolute; top: 0; right: 10px; width: 150px; height: 300px; background-color: #EEE;"> <div #toolBoxRef class="hotzone-toolbox" [class]="{ 'fix-top': toolBoxFixTop}">
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;"> <div class="tool-item">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">名称:</span> <span class="item-name">名称:</span>
<input type="text" nz-input [(ngModel)]="currentSetting.itemName" style="display: inline-block; width: 100px;"> <input class="edit" type="text" nz-input [(ngModel)]="currentSetting.itemName">
</p> </div>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;"> <div class="tool-item">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">宽:</span> <span class="item-name">宽:</span>
<input type="text" nz-input [(ngModel)]="currentSetting.width" style="display: inline-block; width: 100px;"> <input class="edit" type="text" nz-input [(ngModel)]="currentSetting.width">
</p> </div>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;"> <div class="tool-item">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">高:</span> <span class="item-name">高:</span>
<input type="text" nz-input [(ngModel)]="currentSetting.height" style="display: inline-block; width: 100px;"> <input class="edit" type="text" nz-input [(ngModel)]="currentSetting.height">
</p> </div>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;"> <div class="tool-item">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">x:</span> <span class="item-name">x:</span>
<input type="text" nz-input [(ngModel)]="currentSetting.x" style="display: inline-block; width: 100px;"> <input class="edit" type="text" nz-input [(ngModel)]="currentSetting.x">
</p> </div>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;"> <div class="tool-item">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">y:</span> <span class="item-name">y:</span>
<input type="text" nz-input [(ngModel)]="currentSetting.y" style="display: inline-block; width: 100px;"> <input class="edit" type="text" nz-input [(ngModel)]="currentSetting.y">
</p> </div>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;"> <div class="tool-item">
<button nz-button nzSize="mini" (click)="handleClickUpdateHotZoneParams()" nzType="primary">更新</button> <button nz-button nzSize="mini" (click)="handleClickUpdateHotZoneParams()" nzType="primary">设置</button>
</p> </div>
<div class="tool-item">
<label nz-checkbox [(ngModel)]="inLayoutMode" (change)="onAdjustModeChange($event)">布局模式</label>
</div>
<div class="tool-items">
<div nz-tooltip nzTooltipPlacement="bottom" nzTooltipTitle="相同大小 (以第一个选择的热区为基准)" (click)="handleClickToSameSize()" class="icon-btn">
<svg t="1678350915666" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3053" width="28" height="28"><path d="M263.2 761.3H145.4c-45.5 0-82.5-37-82.5-82.5V150.6c0-45.5 37-82.5 82.5-82.5h488.9c45.5 0 82.5 37 82.5 82.5v70.1c0 11-9 20-20 20s-20-9-20-20v-70.1c0-23.4-19-42.5-42.5-42.5H145.4c-23.4 0-42.5 19-42.5 42.5v528.3c0 23.4 19 42.5 42.5 42.5h117.8c11 0 20 9 20 20s-8.9 19.9-20 19.9z" fill="currentColor" p-id="3054"></path><path d="M897.2 971.1H400.9c-42.5 0-77.2-34.6-77.2-77.2V358.4c0-42.5 34.6-77.2 77.2-77.2h496.4c42.5 0 77.2 34.6 77.2 77.2V894c-0.1 42.5-34.7 77.1-77.3 77.1zM400.9 321.2c-20.5 0-37.2 16.7-37.2 37.2V894c0 20.5 16.7 37.2 37.2 37.2h496.4c20.5 0 37.2-16.7 37.2-37.2V358.4c0-20.5-16.7-37.2-37.2-37.2H400.9z" fill="currentColor" p-id="3055"></path></svg>
</div>
<div nz-tooltip nzTooltipPlacement="bottom" nzTooltipTitle="上对齐" (click)="handleClickAlignTop()" class="icon-btn">
<svg t="1678350830188" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1549" width="28" height="28"><path d="M191 926.8c-11 0-20-9-20-20V287.6c0-11 9-20 20-20s20 9 20 20v619.2c0 11-8.9 20-20 20zM509 628.1c-11 0-20-9-20-20V287.6c0-11 9-20 20-20s20 9 20 20v320.5c0 11-8.9 20-20 20zM827.1 786.9c-11 0-20-9-20-20V287.6c0-11 9-20 20-20s20 9 20 20V767c0 11-9 19.9-20 19.9z" fill="currentColor" p-id="1550"></path><path d="M964 160.3H54.1c-11 0-20-9-20-20s9-20 20-20H964c11 0 20 9 20 20s-9 20-20 20z" fill="currentColor" p-id="1551"></path></svg>
</div>
<div nz-tooltip nzTooltipPlacement="bottom" nzTooltipTitle="下对齐" (click)="handleClickAlignBottom()" class="icon-btn">
<svg t="1678351858696" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3554" width="28" height="28"><path d="M195 131.2c-11 0-20 9-20 20v619.2c0 11 9 20 20 20s20-9 20-20V151.2c0-11-8.9-20-20-20zM513 429.9c-11 0-20 9-20 20v320.5c0 11 9 20 20 20s20-9 20-20V449.9c0-11-8.9-20-20-20zM831.1 271.1c-11 0-20 9-20 20v479.4c0 11 9 20 20 20s20-9 20-20V291.1c0-11.1-9-20-20-20z" fill="currentColor" p-id="3555"></path><path d="M968 897.7H58.1c-11 0-20 9-20 20s9 20 20 20H968c11 0 20-9 20-20s-9-20-20-20z" fill="currentColor" p-id="3556"></path></svg>
</div>
<div nz-tooltip nzTooltipPlacement="bottom" nzTooltipTitle="左对齐" (click)="handleClickAlignLeft()" class="icon-btn">
<svg t="1678350864717" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2051" width="28" height="28"><path d="M926.2 225.9H277c-11.5 0-20.9-9.4-20.9-20.9 0-11.5 9.4-20.9 20.9-20.9h649.2c11.5 0 20.9 9.4 20.9 20.9 0 11.5-9.3 20.9-20.9 20.9zM613.1 540.7H277c-11.5 0-20.9-9.4-20.9-20.9 0-11.5 9.4-20.9 20.9-20.9h336c11.5 0 20.9 9.4 20.9 20.9 0.1 11.6-9.3 20.9-20.8 20.9zM779.6 855.6H277c-11.5 0-20.9-9.4-20.9-20.9 0-11.5 9.4-20.9 20.9-20.9h502.6c11.5 0 20.9 9.4 20.9 20.9 0 11.5-9.3 20.9-20.9 20.9z" fill="currentColor" p-id="2052"></path><path d="M116 987c-11.5 0-20.9-9.4-20.9-20.9V73.6c0-11.5 9.4-20.9 20.9-20.9s20.9 9.4 20.9 20.9v892.5c0 11.5-9.3 20.9-20.9 20.9z" fill="currentColor" p-id="2053"></path></svg>
</div>
<div nz-tooltip nzTooltipPlacement="bottom" nzTooltipTitle="右对齐" (click)="handleClickAlignRight()" class="icon-btn">
<svg t="1678350874629" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2302" width="28" height="28"><path d="M101.8 225.9H751c11.5 0 20.9-9.4 20.9-20.9 0-11.5-9.4-20.9-20.9-20.9H101.8c-11.5 0-20.9 9.4-20.9 20.9 0 11.5 9.3 20.9 20.9 20.9zM414.9 540.7h336c11.5 0 20.9-9.4 20.9-20.9 0-11.5-9.4-20.9-20.9-20.9h-336c-11.5 0-20.9 9.4-20.9 20.9 0 11.6 9.4 20.9 20.9 20.9zM248.4 855.6H751c11.5 0 20.9-9.4 20.9-20.9 0-11.5-9.4-20.9-20.9-20.9H248.4c-11.5 0-20.9 9.4-20.9 20.9 0 11.5 9.3 20.9 20.9 20.9z" fill="currentColor" p-id="2303"></path><path d="M912 987c11.5 0 20.9-9.4 20.9-20.9V73.6c0-11.5-9.4-20.9-20.9-20.9-11.5 0-20.9 9.4-20.9 20.9v892.5c0 11.5 9.3 20.9 20.9 20.9z" fill="currentColor" p-id="2304"></path></svg>
</div>
<div nz-tooltip nzTooltipPlacement="bottom" nzTooltipTitle="水平居中对齐 (以第一个选择的热区为基准)" (click)="handleClickHMiddle()" class="icon-btn">
<svg t="1678350905967" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2803" width="28" height="28"><path d="M195 196.3c-11 0-20 9-20 20v619.2c0 11 9 20 20 20s20-9 20-20V216.3c0-11-8.9-20-20-20zM513 345.7c-11 0-20 9-20 20v320.5c0 11 9 20 20 20s20-9 20-20V365.7c0-11.1-8.9-20-20-20zM831.1 266.2c-11 0-20 9-20 20v479.4c0 11 9 20 20 20s20-9 20-20V286.2c0-11-9-20-20-20z" fill="currentColor" p-id="2804"></path></svg>
</div>
<div nz-tooltip nzTooltipPlacement="bottom" nzTooltipTitle="垂直居中对齐 (以第一个选择的热区为基准)" (click)="handleClickVMiddle()" class="icon-btn">
<svg t="1678350984392" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3304" width="28" height="28"><path d="M107.7 808.1h814.6c14.5 0 26.2 9.4 26.2 20.9 0 11.5-11.7 20.9-26.2 20.9H107.7c-14.5 0-26.2-9.4-26.2-20.9 0-11.5 11.7-20.9 26.2-20.9zM304.2 493.3h421.6c14.5 0 26.2 9.4 26.2 20.9 0 11.5-11.7 20.9-26.2 20.9H304.2c-14.5 0-26.2-9.4-26.2-20.9 0-11.6 11.7-20.9 26.2-20.9zM199.7 178.4h630.6c14.5 0 26.2 9.4 26.2 20.9s-11.7 20.9-26.2 20.9H199.7c-14.5 0-26.2-9.4-26.2-20.9s11.7-20.9 26.2-20.9z" fill="currentColor" p-id="3305"></path></svg>
</div>
<div nz-tooltip nzTooltipPlacement="bottom" nzTooltipTitle="相同水平间距" (click)="handleClickHSpaceBetween()" class="icon-btn">
<svg t="1678354726989" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4058" width="28" height="28"><path d="M828.4 123.5H225.6c-11 0-20-9-20-20s9-20 20-20h602.8c11 0 20 9 20 20s-8.9 20-20 20z" fill="currentColor" p-id="4059"></path><path d="M527 752.6c-11 0-20-9-20-20V108.4c0-11 9-20 20-20s20 9 20 20v624.2c0 11-9 20-20 20z" fill="currentColor" p-id="4060"></path><path d="M359.5 952.9c-3.3 0-6.6-0.8-9.7-2.5l-167-92.3c-6.4-3.5-10.4-10.3-10.3-17.6s4.1-14 10.5-17.5l167-89.7c9.7-5.2 21.9-1.6 27.1 8.2s1.6 21.9-8.2 27.1l-134.7 72.3 134.9 74.6c9.7 5.3 13.2 17.5 7.8 27.2-3.6 6.4-10.4 10.2-17.4 10.2zM694.5 952.9c-7 0-13.9-3.7-17.5-10.3-5.3-9.7-1.8-21.8 7.8-27.2l134.9-74.6L685 768.5c-9.7-5.2-13.4-17.3-8.2-27.1s17.3-13.4 27.1-8.2l167 89.7c6.5 3.5 10.5 10.2 10.5 17.5 0 7.3-3.9 14.1-10.3 17.6l-167 92.3c-3 1.8-6.3 2.6-9.6 2.6z" fill="currentColor" p-id="4061"></path><path d="M845.7 860.3H215.6c-11 0-20-9-20-20s9-20 20-20h630.1c11 0 20 9 20 20s-9 20-20 20z" fill="currentColor" p-id="4062"></path></svg>
</div>
<div nz-tooltip nzTooltipPlacement="bottom" nzTooltipTitle="相同垂直间距" (click)="handleClickVSpaceBetween()" class="icon-btn">
<svg t="1678354701685" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3805" width="28" height="28"><path d="M670.5 242.1H42.7c-11 0-20-9-20-20s9-20 20-20h627.8c11 0 20 9 20 20s-9 20-20 20z" fill="currentColor" p-id="3806"></path><path d="M356.6 897.2c-11 0-20-9-20-20v-650c0-11 9-20 20-20s20 9 20 20v650c0 11-9 20-20 20z" fill="currentColor" p-id="3807"></path><path d="M970 378.9c-7.1 0-14-3.8-17.6-10.5l-76-141.6L798 368.6c-5.3 9.7-17.5 13.2-27.2 7.8-9.7-5.3-13.2-17.5-7.8-27.2l96.2-174c3.5-6.4 10.2-10.3 17.5-10.3h0.1c7.3 0 14 4.1 17.5 10.5l93.4 174c5.2 9.7 1.6 21.9-8.2 27.1-3.1 1.6-6.3 2.4-9.5 2.4zM876.6 906.9c-7.3 0-14-4-17.5-10.3l-96.2-174c-5.3-9.7-1.8-21.8 7.8-27.2 9.7-5.3 21.8-1.8 27.2 7.8L876.3 845l76-141.6c5.2-9.7 17.3-13.4 27.1-8.2 9.7 5.2 13.4 17.3 8.2 27.1l-93.4 174c-3.5 6.5-10.2 10.5-17.5 10.5 0 0.1-0.1 0.1-0.1 0.1z" fill="currentColor" p-id="3808"></path><path d="M876.9 890.3c-11 0-20-9-20-20V209.1c0-11 9-20 20-20s20 9 20 20v661.3c0 11-9 19.9-20 19.9z" fill="currentColor" p-id="3809"></path></svg>
</div>
</div>
<div class="tool-item right-btn">
<button class="save-btn" nz-button nzType="primary" (click)="saveClick()" >
保存
</button>
</div>
</div> </div>
</div> </div>
......
...@@ -89,7 +89,67 @@ h5 { ...@@ -89,7 +89,67 @@ h5 {
src: url("/assets/font/BRLNSR_1.TTF") ; src: url("/assets/font/BRLNSR_1.TTF") ;
} }
.hotzone-toolbox {
background-color: #EEEEEE;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
display: flex;
&.fix-top {
border-radius: 5px;
box-shadow: 0 2px 4px 0 #00000066;
}
.tool-item {
width: 130px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
&.right-btn {
position: absolute;
right: 10px;
}
.item-name {
width: 50px;
text-align: right;
}
.edit {
width: 80px;
}
}
.tool-items {
width: 500px;
display: flex;
justify-content: space-between;
align-items: center;
.icon-btn {
display: flex;
justify-content: center;
align-items: center;
width: 42px;
cursor: pointer;
.icon {
color: #515151;
}
}
.icon-btn:hover {
background-color: #ddd;
.icon {
color: blueviolet;
}
}
}
}
......
...@@ -37,6 +37,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -37,6 +37,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@ViewChild('canvas', {static: true}) canvas: ElementRef; @ViewChild('canvas', {static: true}) canvas: ElementRef;
@ViewChild('wrap', {static: true}) wrap: ElementRef; @ViewChild('wrap', {static: true}) wrap: ElementRef;
@ViewChild('hotZoneRef', {static: true}) hotZoneRef: ElementRef;
@ViewChild('toolBoxRef', {static: true}) toolBoxRef: ElementRef;
@ViewChild('previewBoxRef', {static: true}) previewBoxRef: ElementRef;
@Input() @Input()
isHasRect = true; isHasRect = true;
...@@ -83,13 +87,14 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -83,13 +87,14 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
oldPos; oldPos;
radioValue; radioValue;
curItem; curItem;
curItems = []; // 多选热区 布局调整
bg: MySprite; bg: MySprite;
changeSizeFlag = false; changeSizeFlag = false;
changeTopSizeFlag = false; changeTopSizeFlag = false;
changeRightSizeFlag = false; changeRightSizeFlag = false;
// 微调模式 // 布局模式
inAdjustMode = false; inLayoutMode = false;
// 当前微调的对象 // 当前微调的对象
currentSetting = { currentSetting = {
...@@ -121,6 +126,35 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -121,6 +126,35 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.winResizeEventStream.next(); this.winResizeEventStream.next();
} }
toolBoxFixTop = false;
@HostListener('window:scroll')
onscroll(){
const scrollTop = document.documentElement.scrollTop; // 页面顶端滚出屏幕的距离
const offsetHeight = this.previewBoxRef.nativeElement.offsetHeight; // 预览框的高度
const offsetTop = this.hotZoneRef.nativeElement.offsetTop; // 热区距离页面顶端的距离
if(scrollTop <= offsetTop || (scrollTop - offsetTop) > offsetHeight) {
this.toolBoxRef.nativeElement.style.position = "absolute";
this.toolBoxFixTop = false;
} else {
this.toolBoxRef.nativeElement.style.position = "fixed";
this.toolBoxFixTop = true;
}
}
keyCtrlDown = false; // ctrl键是否被按下
@HostListener('window:keydown', ['$event'])
onKeyDown(e) {
if(e.keyCode == 91) {
this.keyCtrlDown = true;
}
}
@HostListener('window:keyup', ['$event'])
onKeyUp(e) {
if(e.keyCode == 91) {
this.keyCtrlDown = false;
}
}
ngOnInit() { ngOnInit() {
...@@ -515,11 +549,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -515,11 +549,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
mapDown(event) { mapDown(event) {
console.log(event)
this.oldPos = {x: this.mx, y: this.my}; this.oldPos = {x: this.mx, y: this.my};
for (let i = 0; i < this.hotZoneArr.length; i++) { for (let i = 0; i < this.hotZoneArr.length; i++) {
const item = this.hotZoneArr[i]; const item = this.hotZoneArr[i];
let callback; let callback;
let target; let target;
...@@ -544,6 +576,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -544,6 +576,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
} }
// 点击时没有按下Command键 则清空选择的热区点
if(!this.keyCtrlDown) {
this.resetAllItemColors();
}
} }
...@@ -610,7 +646,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -610,7 +646,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
setCurItemSize(size) { setCurItemSize(size) {
console.log(size, this.curItem)
const curItem = this.hotZoneArr[size.index] const curItem = this.hotZoneArr[size.index]
let sx = size.width / curItem.width; let sx = size.width / curItem.width;
...@@ -682,15 +717,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -682,15 +717,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
changeCurItem(item) { changeCurItem(item) {
this.hideAllLineDash(); this.hideAllLineDash();
this.curItem = item; this.curItem = item;
this.curItem.showLineDash(); this.curItem.showLineDash();
} }
hideAllLineDash() { hideAllLineDash() {
for (let i = 0; i < this.imgArr.length; i++) { for (let i = 0; i < this.imgArr.length; i++) {
if (this.imgArr[i].picItem) { if (this.imgArr[i].picItem) {
this.imgArr[i].picItem.hideLineDash(); this.imgArr[i].picItem.hideLineDash();
...@@ -723,7 +755,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -723,7 +755,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.updateArr(this.hotZoneArr); this.updateArr(this.hotZoneArr);
this.updatePos() this.updatePos()
TWEEN.update(); TWEEN.update();
} }
...@@ -942,15 +973,33 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -942,15 +973,33 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
private clickedHotZoneRect(item: any) { private clickedHotZoneRect(item: any) {
if (this.checkClickTarget(item)) { if (this.checkClickTarget(item)) {
if (!this.inLayoutMode && item.lineDashFlag && this.checkClickTarget(item.arrow)) {
if (!this.inAdjustMode && item.lineDashFlag && this.checkClickTarget(item.arrow)) {
this.changeItemSize(item); this.changeItemSize(item);
} else if (!this.inAdjustMode && item.lineDashFlag && this.checkClickTarget(item.arrowTop)) { } else if (!this.inLayoutMode && item.lineDashFlag && this.checkClickTarget(item.arrowTop)) {
this.changeItemTopSize(item); this.changeItemTopSize(item);
} else if (!this.inAdjustMode && item.lineDashFlag && this.checkClickTarget(item.arrowRight)) { } else if (!this.inLayoutMode && item.lineDashFlag && this.checkClickTarget(item.arrowRight)) {
this.changeItemRightSize(item); this.changeItemRightSize(item);
} else { } else {
if(this.keyCtrlDown) {
const bd = item.getBoundingBox()
const rectParams = {
index: item.index,
itemName: item.itemName,
x: bd.x,
y: bd.y,
width: bd.width,
height: bd.height,
}
// 如果之前没有选择过任何项目 则重置颜色
if(this.curItems.length == 0) {
this.resetAllItemColors();
}
item.showColorMask = true;
this.curItems.push(rectParams)
} else {
this.resetAllItemColors();
this.changeCurItem(item); this.changeCurItem(item);
item.showColorMask = true;
const bd = item.getBoundingBox() const bd = item.getBoundingBox()
const rectParams = { const rectParams = {
index: item.index, index: item.index,
...@@ -962,10 +1011,203 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -962,10 +1011,203 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
this.currentSetting = rectParams; this.currentSetting = rectParams;
} }
}
return; return;
} }
} }
// 清除所有当前选中的item - 清除高亮
resetAllItemColors() {
this.hotZoneArr.forEach(item=>{
item.showColorMask = false;
})
this.curItems = [];
}
// 顶部对齐所选元素
handleClickAlignTop() {
let minY = -1;
this.curItems.forEach(item=>{
// 取所有元素中 y坐标最小值
if( minY < 0 || item.y < minY) {
minY = item.y;
}
})
if(minY >=0 ) {
this.curItems.forEach(item => {
item.y = minY;
this.setCurItemSize(item)
});
}
}
// 底部对齐所选元素
handleClickAlignBottom() {
let maxY = 100000;
this.curItems.forEach(item=>{
// 取所有元素中 y坐标最大值
if( maxY > 99999 || item.y > maxY) {
maxY = item.y + item.height;
}
})
if(maxY < 100000 ) {
this.curItems.forEach(item => {
item.y = maxY - item.height;
this.setCurItemSize(item);
});
}
}
// 左侧对齐所选元素
handleClickAlignLeft() {
let minX = -1;
this.curItems.forEach(item=>{
// 取所有元素中 y坐标最小值
if( minX < 0 || item.x < minX) {
minX = item.x;
}
})
if(minX >=0 ) {
this.curItems.forEach(item => {
item.x = minX;
this.setCurItemSize(item);
});
}
}
// 右侧对齐所选元素
handleClickAlignRight() {
let maxX = 100000;
this.curItems.forEach(item=>{
// 取所有元素中 y坐标最大值
if( maxX > 99999 || item.x > maxX) {
maxX = item.x + item.width;
}
})
if(maxX < 100000 ) {
this.curItems.forEach(item => {
item.x = maxX - item.width;
this.setCurItemSize(item);
});
}
}
// 水平居中所选元素
handleClickHMiddle() {
let baseY = 0;
if(this.curItems.length > 0) {
baseY = this.curItems[0].y + this.curItems[0].height / 2;
}
if(baseY > 0) {
this.curItems.forEach(item => {
item.y = baseY - item.height / 2;
this.setCurItemSize(item);
});
}
}
// 垂直居中所选元素
handleClickVMiddle() {
let baseX = 0;
if(this.curItems.length > 0) {
baseX = this.curItems[0].x + this.curItems[0].width / 2;
}
if(baseX > 0) {
this.curItems.forEach(item => {
item.x = baseX - item.width / 2;
this.setCurItemSize(item);
});
}
}
// 水平间距相同
handleClickHSpaceBetween() {
this.curItems.sort((a, b) => {
return a.x - b.x
})
let startX = 0;
let endX = 0;
let contentWidth = 0;
if(this.curItems.length >= 2) {
startX = this.curItems[0].x;
endX = this.curItems[this.curItems.length - 1].x + this.curItems[this.curItems.length - 1].width;
} else {
return;
}
this.curItems.forEach(item=>{
contentWidth += item.width;
})
let space = (endX - startX - contentWidth) / (this.curItems.length - 1);
if(space > 0) {
let currentX = this.curItems[0].x;
this.curItems.forEach(item => {
item.x = currentX;
currentX += space + item.width;
this.setCurItemSize(item);
});
}
}
// 垂直间距相同
handleClickVSpaceBetween() {
this.curItems.sort((a, b) => {
return a.y - b.y
})
let startY = 0;
let endY = 0;
let contentHeight = 0;
if(this.curItems.length >= 2) {
startY = this.curItems[0].y;
endY = this.curItems[this.curItems.length - 1].y + this.curItems[this.curItems.length - 1].height;
} else {
return;
}
this.curItems.forEach(item=>{
contentHeight += item.height;
})
let space = (endY - startY - contentHeight) / (this.curItems.length - 1);
if(space > 0) {
let currentY = this.curItems[0].y;
this.curItems.forEach(item => {
item.y = currentY;
currentY += space + item.height;
this.setCurItemSize(item);
});
}
}
// 使所有选择的热区和第一个选择的热区具有相同大小
handleClickToSameSize() {
let baseWidth = 0;
let baseHeight = 0;
if(this.curItems.length > 0) {
baseWidth = this.curItems[0].width;
baseHeight = this.curItems[0].height;
}
if(baseWidth > 0 && baseHeight > 0) {
this.curItems.forEach(item => {
let adjustX = (item.width - baseWidth) / 2;
let adjustY = (item.height - baseHeight) / 2;
item.x = item.x + adjustX;
item.y = item.y + adjustY;
item.width = baseWidth;
item.height = baseHeight;
this.setCurItemSize(item);
});
}
}
// 处理微调更新热区位置参数 // 处理微调更新热区位置参数
handleClickUpdateHotZoneParams() { handleClickUpdateHotZoneParams() {
this.setCurItemSize({ this.setCurItemSize({
...@@ -978,6 +1220,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -978,6 +1220,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}) })
} }
// 调整模式改变
onAdjustModeChange(e) {
this.hotZoneArr.forEach(zone => {
zone.hideArrow = this.inLayoutMode;
});
}
private clickedHotZonePic(item: any) { private clickedHotZonePic(item: any) {
if (this.checkClickTarget(item)) { if (this.checkClickTarget(item)) {
this.curItem = item; this.curItem = item;
......
...@@ -64,7 +64,6 @@ ...@@ -64,7 +64,6 @@
<nz-option [nzValue]="SORT_WORDS" nzLabel="单词排序"></nz-option> <nz-option [nzValue]="SORT_WORDS" nzLabel="单词排序"></nz-option>
<nz-option [nzValue]="IMAGE_SELECT" nzLabel="图片选项" nzDisabled></nz-option> <nz-option [nzValue]="IMAGE_SELECT" nzLabel="图片选项" nzDisabled></nz-option>
<nz-option [nzValue]="PRONUNCIATION_ASSESSMENT" nzLabel="语音评测" nzDisabled></nz-option> <nz-option [nzValue]="PRONUNCIATION_ASSESSMENT" nzLabel="语音评测" nzDisabled></nz-option>
</nz-select> </nz-select>
<div *ngIf="it.hotZoneType != '' && it.hotZoneType != AUDIO_PLAY && it.hotZoneType != TEXTINPUT && it.hotZoneType != PRONUNCIATION_ASSESSMENT" style="padding: 10px 0 10px 150px;"> <div *ngIf="it.hotZoneType != '' && it.hotZoneType != AUDIO_PLAY && it.hotZoneType != TEXTINPUT && it.hotZoneType != PRONUNCIATION_ASSESSMENT" style="padding: 10px 0 10px 150px;">
<div style="margin-bottom: 16px;"> <div style="margin-bottom: 16px;">
......
...@@ -6,6 +6,7 @@ import { ...@@ -6,6 +6,7 @@ import {
OnChanges, OnChanges,
OnInit, OnInit,
Output, Output,
HostListener,
ApplicationRef, ApplicationRef,
ChangeDetectorRef, ChangeDetectorRef,
AfterViewInit AfterViewInit
...@@ -50,6 +51,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni ...@@ -50,6 +51,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
CROSSWORD_PUZZLE = "9"; CROSSWORD_PUZZLE = "9";
SORT_WORDS = "10"; SORT_WORDS = "10";
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef, private nzMessageService: NzMessageService, private modal: NzModalService) { constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef, private nzMessageService: NzMessageService, private modal: NzModalService) {
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment