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;
curCtx: any;
}
......@@ -10,7 +9,7 @@ declare let window: AirWindow;
class Sprite {
x = 0;
y = 0;
color = '';
color = "";
radius = 0;
alive = false;
margin = 0;
......@@ -27,18 +26,10 @@ class Sprite {
update($event) {
this.draw();
}
draw() {
}
draw() {}
}
export class MySprite extends Sprite {
_width = 0;
_height = 0;
_anchorX = 0;
......@@ -65,67 +56,98 @@ export class MySprite extends Sprite {
childDepandVisible = true;
childDepandAlpha = false;
hideArrow = false;
showColorMask = false;
img;
_z = 0;
_showRect;
_bitmapFlag = false;
_offCanvas;
_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) {
if (imgObj) {
this.img = imgObj;
this.width = this.img.width;
this.height = this.img.height;
}
this.anchorX = anchorX;
this.anchorY = anchorY;
}
setShowRect(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._shadowColor = color;
this._shadowOffsetX = offX;
this._shadowOffsetY = offY;
this._shadowBlur = blur;
}
setRadius(r) {
this._radius = r;
}
update($event = null) {
if (!this.visible && this.childDepandVisible) {
return;
}
this.draw();
}
draw() {
this.ctx.save();
this.drawInit();
......@@ -133,15 +155,12 @@ export class MySprite extends Sprite {
this.updateChildren();
this.ctx.restore();
}
drawInit() {
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);
......@@ -149,9 +168,6 @@ export class MySprite extends Sprite {
this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0);
//
// if (this._radius) {
//
......@@ -167,15 +183,10 @@ export class MySprite extends Sprite {
//
// this.ctx.clip();
// }
}
drawSelf() {
if (this._shadowFlag) {
this.ctx.shadowOffsetX = this._shadowOffsetX;
this.ctx.shadowOffsetY = this._shadowOffsetY;
this.ctx.shadowBlur = this._shadowBlur;
......@@ -187,27 +198,32 @@ export class MySprite extends Sprite {
this.ctx.shadowColor = null;
}
if (this.img) {
if (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 {
this.ctx.drawImage(this.img, this._offX, this._offY);
}
}
}
updateChildren() {
if (this.children.length <= 0) {
return;
}
if (this.children.length <= 0) { return; }
for (const child of this.children) {
for (const child of this.children) {
if (child === this) {
if (this.visible) {
this.drawSelf();
......@@ -218,16 +234,13 @@ export class MySprite extends Sprite {
}
}
load(url, anchorX = 0.5, anchorY = 0.5) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
}).then(img => {
}).then((img) => {
this.init(img, anchorX, anchorY);
return img;
});
......@@ -244,11 +257,9 @@ export class MySprite extends Sprite {
return a._z - b._z;
});
if (this.childDepandAlpha) {
child.alpha = this.alpha;
}
}
removeChild(child) {
const index = this.children.indexOf(child);
......@@ -262,64 +273,20 @@ export class MySprite extends Sprite {
if (this.children[i]) {
if (this.children[i] !== this) {
this.children.splice(i, 1);
i --;
i--;
}
}
}
}
_changeChildAlpha(alpha) {
for (const child of this.children) {
for (const child of this.children) {
if (child !== this) {
child.alpha = alpha;
}
}
}
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() {
this._offX = -this._width * this.anchorX;
this._offY = -this._height * this.anchorY;
......@@ -329,11 +296,8 @@ export class MySprite extends Sprite {
this.scaleX = this.scaleY = value;
}
getBoundingBox() {
const getParentData = (item) => {
let px = item.x;
let py = item.y;
......@@ -341,7 +305,6 @@ export class MySprite extends Sprite {
let sy = item.scaleY;
const parent = item.parent;
if (parent) {
const obj = getParentData(parent);
const _x = obj.px;
......@@ -354,64 +317,50 @@ export class MySprite extends Sprite {
sx *= _sx;
sy *= _sy;
}
return {px, py, sx, sy};
return { px, py, sx, sy };
};
const data = getParentData(this);
const x = data.px + this._offX * Math.abs(data.sx);
const y = data.py + this._offY * Math.abs(data.sy);
const width = this.width * Math.abs(data.sx);
const height = this.height * Math.abs(data.sy);
return {x, y, width, height};
return { x, y, width, height };
}
}
export class RoundSprite extends MySprite {
_newCtx;
init(imgObj = null, anchorX: number = 0.5, anchorY: number = 0.5) {
if (imgObj) {
this.img = imgObj;
this.width = this.img.width;
this.height = this.img.height;
}
this.anchorX = anchorX;
this.anchorY = anchorY;
const canvas = window['curCanvas'];
const canvas = window["curCanvas"];
const w = canvas.nativeElement.width;
const h = canvas.nativeElement.height;
this._offCanvas = document.createElement('canvas');
this._offCanvas = document.createElement("canvas");
this._offCanvas.width = w;
this._offCanvas.height = h;
this._offCtx = this._offCanvas.getContext('2d');
this._offCtx = this._offCanvas.getContext("2d");
// this._newCtx = this.ctx;
// this.ctx = this._offCtx;
}
drawSelf() {
//
// if (this._shadowFlag) {
......@@ -427,16 +376,14 @@ export class RoundSprite extends MySprite {
// this.ctx.shadowColor = null;
// }
if (this._radius) {
const r = this._radius;
const w = this.width;
const h = this.height;
const x = -this._offX;
const y = -this._offY;
this._offCtx.lineTo(x - w / 2, y + h / 2); // 创建水平线
this._offCtx.lineTo(x - w / 2, y + h / 2); // 创建水平线
this._offCtx.arcTo(x - w / 2, y - h / 2, x - w / 2 + r, y - h / 2, r);
this._offCtx.arcTo(x + w / 2, y - h / 2, x + w / 2, y - h / 2 + r, r);
this._offCtx.arcTo(x + w / 2, y + h / 2, x + w / 2 - r, y + h / 2, r);
......@@ -445,45 +392,32 @@ export class RoundSprite extends MySprite {
this._offCtx.clip();
}
if (this.img) {
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 {
r = 0;
g = 0;
b = 0;
createGSCanvas() {
if (!this.img) {
return;
}
const rect = this.getBoundingBox();
if (rect.width <= 1 || rect.height <= 1) {
return;
}
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for ( let i = 0; i < c.height; i++) {
for ( let j = 0; j < c.width; j++) {
const x = (i * 4) * c.width + ( j * 4 );
for (let i = 0; i < c.height; i++) {
for (let j = 0; j < c.width; j++) {
const x = i * 4 * c.width + j * 4;
const r = c.data[x];
const g = c.data[x + 1];
const b = c.data[x + 2];
......@@ -492,8 +426,6 @@ export class ColorSpr extends MySprite {
c.data[x + 1] = this.g;
c.data[x + 2] = this.b;
// c.data[x] = c.data[x + 1] = c.data[x + 2] = (r + g + b) / 3 ;
// // c.data[x + 3] = 255;
}
......@@ -502,34 +434,26 @@ export class ColorSpr extends MySprite {
this.ctx.putImageData(c, rect.x, rect.y, 0, 0, rect.width, rect.height);
}
drawSelf() {
super.drawSelf();
this.createGSCanvas();
}
}
export class GrayscaleSpr extends MySprite {
grayScale = 120;
createGSCanvas() {
if (!this.img) {
return;
}
const rect = this.getBoundingBox();
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for ( let i = 0; i < c.height; i++) {
for ( let j = 0; j < c.width; j++) {
const x = (i * 4) * c.width + ( j * 4 );
for (let i = 0; i < c.height; i++) {
for (let j = 0; j < c.width; j++) {
const x = i * 4 * c.width + j * 4;
const r = c.data[x];
const g = c.data[x + 1];
const b = c.data[x + 2];
......@@ -543,35 +467,24 @@ export class GrayscaleSpr extends MySprite {
this.ctx.putImageData(c, rect.x, rect.y, 0, 0, rect.width, rect.height);
}
drawSelf() {
super.drawSelf();
this.createGSCanvas();
}
}
export class BitMapLabel extends MySprite {
labelArr;
baseUrl;
setText(data, text) {
this.labelArr = [];
const labelArr = [];
const tmpArr = text.split('');
const tmpArr = text.split("");
let totalW = 0;
let h = 0;
for (const tmp of tmpArr) {
const label = new MySprite(this.ctx);
label.init(data[tmp], 0);
this.addChild(label);
......@@ -581,36 +494,31 @@ export class BitMapLabel extends MySprite {
h = label.height;
}
this.width = totalW;
this.height = h;
let offX = -totalW / 2;
for (const label of labelArr) {
for (const label of labelArr) {
label.x = offX;
offX += label.width;
}
this.labelArr = labelArr;
}
}
export class Label extends MySprite {
private _text: string;
// fontSize:String = '40px';
fontName = 'Verdana';
textAlign = 'left';
fontName = "Verdana";
textAlign = "left";
fontSize = 40;
fontColor = '#000000';
fontColor = "#000000";
fontWeight = 900;
_maxWidth;
outline = 0;
outlineColor = '#ffffff';
outlineColor = "#ffffff";
// _shadowFlag = false;
// _shadowColor;
// _shadowOffsetX;
......@@ -626,7 +534,6 @@ export class Label extends MySprite {
this.init();
}
get text(): string {
return this._text;
}
......@@ -637,12 +544,11 @@ export class Label extends MySprite {
}
refreshSize() {
this.ctx.save();
this.ctx.font = `${this.fontSize * this.scaleX}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.textBaseline = "middle";
this.ctx.fontWeight = this.fontWeight;
this._width = this.ctx.measureText(this.text).width;
......@@ -650,11 +556,9 @@ export class Label extends MySprite {
this.refreshAnchorOff();
this.ctx.restore();
}
setMaxSize(w) {
this._maxWidth = w;
this.refreshSize();
if (this.width >= w) {
......@@ -664,7 +568,6 @@ export class Label extends MySprite {
}
show(callBack = null) {
this.visible = true;
if (this.alpha >= 1) {
......@@ -682,23 +585,20 @@ export class Label extends MySprite {
.start(); // Start the tween immediately.
}
setOutline(width = 5, color = '#ffffff') {
setOutline(width = 5, color = "#ffffff") {
this._outlineFlag = true;
this._outLineWidth = width;
this._outLineColor = color;
}
drawText() {
if (!this.text) { return; }
if (!this.text) {
return;
}
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.textBaseline = "middle";
this.ctx.fontWeight = this.fontWeight;
if (this._outlineFlag) {
......@@ -709,56 +609,45 @@ export class Label extends MySprite {
this.ctx.fillStyle = this.fontColor;
if (this.outline > 0) {
this.ctx.lineWidth = this.outline;
this.ctx.strokeStyle = this.outlineColor;
this.ctx.strokeText(this.text, 0, 0);
}
this.ctx.fillText(this.text, 0, 0);
}
drawSelf() {
super.drawSelf();
this.drawText();
}
}
export class RichTextOld extends Label {
textArr = [];
fontSize = 40;
setText(text: string, words) {
let newText = text;
for (const word of words) {
const re = new RegExp(word, 'g');
newText = newText.replace( re, `#${word}#`);
const re = new RegExp(word, "g");
newText = newText.replace(re, `#${word}#`);
// newText = newText.replace(word, `#${word}#`);
}
this.textArr = newText.split('#');
this.textArr = newText.split("#");
this.text = newText;
// this.setSize();
}
refreshSize() {
this.ctx.save();
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.textBaseline = "middle";
this.ctx.fontWeight = this.fontWeight;
let curX = 0;
......@@ -772,12 +661,9 @@ export class RichTextOld extends Label {
this.refreshAnchorOff();
this.ctx.restore();
}
show(callBack = null) {
// console.log(' in show ');
this.visible = true;
// this.alpha = 0;
......@@ -791,60 +677,45 @@ export class RichTextOld extends Label {
}
})
.start(); // Start the tween immediately.
}
drawText() {
// console.log('in drawText', this.text);
if (!this.text) { return; }
if (!this.text) {
return;
}
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.textBaseline = "middle";
this.ctx.fontWeight = 900;
this.ctx.lineWidth = 5;
this.ctx.strokeStyle = '#ffffff';
this.ctx.strokeStyle = "#ffffff";
// this.ctx.strokeText(this.text, 0, 0);
this.ctx.fillStyle = '#000000';
this.ctx.fillStyle = "#000000";
// this.ctx.fillText(this.text, 0, 0);
let curX = 0;
for (let i = 0; i < this.textArr.length; i++) {
const w = this.ctx.measureText(this.textArr[i]).width;
if ((i + 1) % 2 === 0) {
this.ctx.fillStyle = '#c8171e';
this.ctx.fillStyle = "#c8171e";
} else {
this.ctx.fillStyle = '#000000';
this.ctx.fillStyle = "#000000";
}
this.ctx.fillText(this.textArr[i], curX, 0);
curX += w;
}
}
}
export class RichText extends Label {
disH = 30;
disH = 30;
constructor(ctx?: any) {
super(ctx);
......@@ -852,82 +723,67 @@ export class RichText extends Label {
// this.dataArr = dataArr;
}
drawText() {
if (!this.text) {
return;
}
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.textBaseline = "middle";
this.ctx.fontWeight = this.fontWeight;
this.ctx.fillStyle = this.fontColor;
const selfW = this.width * this.scaleX;
const chr = this.text.split(' ');
let temp = '';
const chr = this.text.split(" ");
let temp = "";
const row = [];
const w = selfW - 80;
const disH = (this.fontSize + this.disH) * this.scaleY;
for (const c of chr) {
if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + (c)).width <= w) {
temp += ' ' + c;
for (const c of chr) {
if (
this.ctx.measureText(temp).width < w &&
this.ctx.measureText(temp + c).width <= w
) {
temp += " " + c;
} else {
row.push(temp);
temp = ' ' + c;
temp = " " + c;
}
}
row.push(temp);
const x = 0;
const y = -row.length * disH / 2;
const y = (-row.length * disH) / 2;
// for (let b = 0 ; b < row.length; b++) {
// this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
// }
if (this._outlineFlag) {
this.ctx.lineWidth = this._outLineWidth;
this.ctx.strokeStyle = this._outLineColor;
for (let b = 0 ; b < row.length; b++) {
this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
for (let b = 0; b < row.length; b++) {
this.ctx.strokeText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
}
// this.ctx.strokeText(this.text, 0, 0);
}
// this.ctx.fillStyle = '#ff7600';
for (let b = 0 ; b < row.length; b++) {
this.ctx.fillText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
for (let b = 0; b < row.length; b++) {
this.ctx.fillText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
}
}
drawSelf() {
super.drawSelf();
this.drawText();
}
}
export class LineRect extends MySprite {
lineColor = '#ffffff';
lineColor = "#ffffff";
lineWidth = 10;
setSize(w, h) {
......@@ -936,7 +792,6 @@ export class LineRect extends MySprite {
}
drawLine() {
this.ctx.beginPath();
this.ctx.moveTo(this._offX, this._offY);
this.ctx.lineTo(this._offX + this.width, this._offY);
......@@ -950,20 +805,16 @@ export class LineRect extends MySprite {
this.ctx.strokeStyle = this.lineColor; // "#ffffff";
this.ctx.stroke();
}
drawSelf() {
super.drawSelf();
this.drawLine();
}
}
export class ShapeRect extends MySprite {
fillColor = '#FF0000';
fillColor = "#FF0000";
setSize(w, h) {
this.width = w;
......@@ -974,33 +825,25 @@ export class ShapeRect extends MySprite {
}
drawShape() {
this.ctx.fillStyle = this.fillColor;
this.ctx.fillRect(this._offX, this._offY, this.width, this.height);
}
drawSelf() {
super.drawSelf();
this.drawShape();
}
}
export class Line extends MySprite {
lineWidth = 5;
lineColor = '#000000';
lineColor = "#000000";
_pointArr = [];
roundFlag = true;
_pointS = 1;
imgObj;
bitMap;
_offCtx;
......@@ -1009,28 +852,24 @@ export class Line extends MySprite {
lastPointIndex = 0;
init() {
const canvas = window['curCanvas'];
const canvas = window["curCanvas"];
const w = canvas.nativeElement.width;
const h = canvas.nativeElement.height;
console.log('w: ', w);
console.log('h: ', h);
console.log("w: ", w);
console.log("h: ", h);
this._offCanvas = document.createElement('canvas');
this._offCanvas = document.createElement("canvas");
this._offCanvas.width = w;
this._offCanvas.height = h;
// this._offCanvas = _offCanvas;
// this._offCtx = this._offCanvas.getContext('2d');
// this._offCanvas = new OffscreenCanvas(w, h);
this._offCtx = this._offCanvas.getContext('2d');
this._offCtx = this._offCanvas.getContext("2d");
}
addPoint(x, y) {
this._pointArr.push([x, y]);
if (this._pointArr.length < 2) {
......@@ -1051,8 +890,6 @@ export class Line extends MySprite {
//
// this.bitMap = this._offCanvas.transferToImageBitmap();
// const tmpLine = new MySprite(this._offCtx);
// tmpLine.init(this.imgObj);
// tmpLine.anchorY = 1;
......@@ -1068,11 +905,9 @@ export class Line extends MySprite {
// tmpLine.rotation = angle;
//
// this.addChild(tmpLine);
}
setPointArr(arr, imgObj) {
this.removeChildren();
if (arr.length < 2) {
......@@ -1082,7 +917,6 @@ export class Line extends MySprite {
let p1 = arr[0];
let p2;
for (let i = 1; i < arr.length; i++) {
p2 = arr[i];
const tmpLine = new MySprite();
......@@ -1094,7 +928,7 @@ export class Line extends MySprite {
const disH = getPosDistance(p1[0], p1[1], p2[0], p2[1]);
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]);
tmpLine.rotation = angle;
......@@ -1105,52 +939,44 @@ export class Line extends MySprite {
}
}
drawLine() {
if (this._pointArr.length < 2) {
return;
}
const curMaxPointIndex = this._pointArr.length - 1;
if (curMaxPointIndex > this.lastPointIndex) {
const arr = this._pointArr;
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++) {
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) {
context.lineCap = "round";
}
context.lineWidth = this.lineWidth; //设置线宽状态
context.lineWidth = this.lineWidth; //设置线宽状态
context.strokeStyle = this.lineColor;
context.stroke();
this.lastPointIndex = curMaxPointIndex;
// this.bitMap = this._offCanvas.transferToImageBitmap();
}
// this.ctx.drawImage(this.bitMap, this._offX, this._offY);
this.ctx.drawImage(this._offCanvas, this._offX, this._offY);
}
drawSelf() {
super.drawSelf();
this.drawLine();
// if (this.img) {
// this.ctx.drawImage(this._offCanvas, 0, 0, this.width, this.height);
// }
......@@ -1159,17 +985,13 @@ export class Line extends MySprite {
// this.bitMap = this._offCanvas.transferToImageBitmap();
// this.ctx.drawImage(this.bitMap, 0, 0, this.width, this.height);
// }
}
}
export class ShapeCircle extends MySprite {
fillColor = '#FF0000';
fillColor = "#FF0000";
radius = 0;
setRadius(r) {
this.anchorX = this.anchorY = 0.5;
......@@ -1179,7 +1001,6 @@ export class ShapeCircle extends MySprite {
}
drawShape() {
this.ctx.beginPath();
this.ctx.fillStyle = this.fillColor;
this.ctx.arc(0, 0, this.radius, 0, angleToRadian(360));
......@@ -1192,15 +1013,10 @@ export class ShapeCircle extends MySprite {
}
}
export class ShapeRectNew extends MySprite {
radius = 0;
fillColor = '#ffffff';
strokeColor = '#000000';
fillColor = "#ffffff";
strokeColor = "#000000";
fill = true;
stroke = false;
lineWidth = 1;
......@@ -1217,9 +1033,7 @@ export class ShapeRectNew extends MySprite {
this.lineWidth = lineWidth;
}
drawShape() {
const ctx = this.ctx;
const width = this.width;
const height = this.height;
......@@ -1229,25 +1043,18 @@ export class ShapeRectNew extends MySprite {
ctx.beginPath(0);
// 从右下角顺时针绘制,弧度从0到1/2PI
ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
// 矩形下边线
ctx.lineTo(radius, height);
// 左下角圆弧,弧度从1/2PI到PI
ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
// 矩形左边线
ctx.lineTo(0, radius);
// 左上角圆弧,弧度从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.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.closePath();
......@@ -1256,32 +1063,28 @@ export class ShapeRectNew extends MySprite {
ctx.fillStyle = this.fillColor;
ctx.fill();
}
if (this.stroke) {
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = this.strokeColor;
ctx.stroke();
}
ctx.restore();
ctx.restore();
}
drawSelf() {
super.drawSelf();
this.drawShape();
}
}
export class MyAnimation extends MySprite {
frameArr = [];
frameIndex = 0;
playFlag = false;
lastDateTime;
curDelay = 0;
loop = false;
playEndFunc;
delayPerUnit = 1;
......@@ -1290,7 +1093,6 @@ export class MyAnimation extends MySprite {
reverseFlag = false;
addFrameByImg(img) {
const spr = new MySprite(this.ctx);
spr.init(img);
this._refreshSize(img);
......@@ -1304,10 +1106,8 @@ export class MyAnimation extends MySprite {
}
addFrameByUrl(url) {
const spr = new MySprite(this.ctx);
spr.load(url).then(img => {
spr.load(url).then((img) => {
this._refreshSize(img);
});
spr.visible = false;
......@@ -1319,7 +1119,6 @@ export class MyAnimation extends MySprite {
}
_refreshSize(img: any) {
if (this.width < img.width) {
this.width = img.width;
}
......@@ -1328,8 +1127,6 @@ export class MyAnimation extends MySprite {
}
}
play() {
this.playFlag = true;
this.lastDateTime = new Date().getTime();
......@@ -1339,13 +1136,11 @@ export class MyAnimation extends MySprite {
this.playFlag = false;
}
replay() {
this.restartFlag = true;
this.play();
}
reverse() {
this.reverseFlag = !this.reverseFlag;
this.frameArr.reverse();
......@@ -1353,7 +1148,7 @@ export class MyAnimation extends MySprite {
}
showAllFrame() {
for (const frame of this.frameArr ) {
for (const frame of this.frameArr) {
frame.alpha = 1;
}
}
......@@ -1364,9 +1159,7 @@ export class MyAnimation extends MySprite {
}
}
playEnd() {
this.playFlag = false;
this.curDelay = 0;
......@@ -1383,7 +1176,7 @@ export class MyAnimation extends MySprite {
this.frameArr[this.frameIndex].visible = false;
}
this.frameIndex ++;
this.frameIndex++;
if (this.frameIndex >= this.frameArr.length) {
if (this.loop) {
this.frameIndex = 0;
......@@ -1391,21 +1184,16 @@ export class MyAnimation extends MySprite {
this.restartFlag = false;
this.frameIndex = 0;
} else {
this.frameIndex -- ;
this.frameIndex--;
this.playEnd();
return;
}
}
this.frameArr[this.frameIndex].visible = true;
}
_updateDelay(delay) {
this.curDelay += delay;
if (this.curDelay < this.delayPerUnit) {
return;
......@@ -1415,7 +1203,9 @@ export class MyAnimation extends MySprite {
}
_updateLastDate() {
if (!this.playFlag) { return; }
if (!this.playFlag) {
return;
}
let delay = 0;
if (this.lastDateTime) {
......@@ -1429,18 +1219,18 @@ export class MyAnimation extends MySprite {
super.update($event);
this._updateLastDate();
}
}
// --------=========== util func =============-------------
export function tweenChange(item, obj, time = 0.8, callBack = null, easing = null, update = null) {
export function tweenChange(
item,
obj,
time = 0.8,
callBack = null,
easing = null,
update = null
) {
const tween = new TWEEN.Tween(item).to(obj, time * 1000);
if (callBack) {
......@@ -1452,7 +1242,7 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
tween.easing(easing);
}
if (update) {
tween.onUpdate( (a, b) => {
tween.onUpdate((a, b) => {
update(a, b);
});
}
......@@ -1461,11 +1251,13 @@ export function tweenChange(item, obj, time = 0.8, callBack = null, easing = nul
return tween;
}
export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = null) {
export function rotateItem(
item,
rotation,
time = 0.8,
callBack = null,
easing = null
) {
const tween = new TWEEN.Tween(item).to({ rotation }, time * 1000);
if (callBack) {
......@@ -1480,11 +1272,17 @@ export function rotateItem(item, rotation, time = 0.8, callBack = null, easing =
tween.start();
}
export function scaleItem(item, scale, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item).to({ scaleX: scale, scaleY: scale}, time * 1000);
export function scaleItem(
item,
scale,
time = 0.8,
callBack = null,
easing = null
) {
const tween = new TWEEN.Tween(item).to(
{ scaleX: scale, scaleY: scale },
time * 1000
);
if (callBack) {
tween.onComplete(() => {
......@@ -1494,15 +1292,19 @@ export function scaleItem(item, scale, time = 0.8, callBack = null, easing = nul
if (easing) {
tween.easing(easing);
}
tween.start();
return tween;
}
export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item).to({ x, y}, time * 1000);
export function moveItem(
item,
x,
y,
time = 0.8,
callBack = null,
easing = null
) {
const tween = new TWEEN.Tween(item).to({ x, y }, time * 1000);
if (callBack) {
tween.onComplete(() => {
......@@ -1518,34 +1320,24 @@ export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null)
return tween;
}
export function endShow(item, s = 1) {
item.scaleX = item.scaleY = 0;
item.alpha = 0;
const tween = new TWEEN.Tween(item)
.to({ alpha: 1, scaleX: s, scaleY: s }, 800)
.easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
})
.onComplete(() => {})
.start();
}
export function hideItem(item, time = 0.8, callBack = null, easing = null) {
if (item.alpha === 0) {
return;
}
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.
.onComplete(() => {
if (callBack) {
......@@ -1560,9 +1352,7 @@ export function hideItem(item, time = 0.8, callBack = null, easing = null) {
tween.start();
}
export function showItem(item, time = 0.8, callBack = null, easing = null) {
if (item.alpha === 1) {
if (callBack) {
callBack();
......@@ -1572,7 +1362,7 @@ export function showItem(item, time = 0.8, callBack = null, easing = null) {
item.visible = true;
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.
.onComplete(() => {
if (callBack) {
......@@ -1587,12 +1377,15 @@ export function showItem(item, time = 0.8, callBack = null, easing = null) {
tween.start();
}
export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = null) {
export function alphaItem(
item,
alpha,
time = 0.8,
callBack = null,
easing = null
) {
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.
.onComplete(() => {
if (callBack) {
......@@ -1607,12 +1400,9 @@ export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = nul
tween.start();
}
export function showStar(item, time = 0.8, callBack = null, easing = null) {
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.
.onComplete(() => {
if (callBack) {
......@@ -1627,7 +1417,6 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) {
tween.start();
}
export function randomSortByArr(arr) {
if (!arr) {
return;
......@@ -1635,69 +1424,69 @@ export function randomSortByArr(arr) {
const newArr = [];
const tmpArr = arr.concat();
while (tmpArr.length > 0) {
const randomIndex = Math.floor( tmpArr.length * Math.random() );
const randomIndex = Math.floor(tmpArr.length * Math.random());
newArr.push(tmpArr[randomIndex]);
tmpArr.splice(randomIndex, 1);
}
return newArr;
}
export function radianToAngle(radian) {
return radian * 180 / Math.PI;
return (radian * 180) / Math.PI;
// 角度 = 弧度 * 180 / Math.PI;
}
export function angleToRadian(angle) {
return angle * Math.PI / 180;
return (angle * Math.PI) / 180;
// 弧度= 角度 * Math.PI / 180;
}
export function getPosByAngle(angle, len) {
const radian = angle * Math.PI / 180;
const radian = (angle * Math.PI) / 180;
const x = Math.sin(radian) * len;
const y = Math.cos(radian) * len;
return {x, y};
return { x, y };
}
export function getAngleByPos(px, py, mx, my) {
const x = Math.abs(px - mx);
const y = Math.abs(py - my);
const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
const cos = y / z;
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;
}
if (mx === px && my > py) {// 鼠标在y轴负方向上
if (mx === px && my > py) {
// 鼠标在y轴负方向上
angle = 180;
}
if (mx > px && my === py) {// 鼠标在x轴正方向上
if (mx > px && my === py) {
// 鼠标在x轴正方向上
angle = 90;
}
if (mx < px && my > py) {// 鼠标在第三象限
if (mx < px && my > py) {
// 鼠标在第三象限
angle = 180 + angle;
}
if (mx < px && my === py) {// 鼠标在x轴负方向
if (mx < px && my === py) {
// 鼠标在x轴负方向
angle = 270;
}
if (mx < px && my < py) {// 鼠标在第二象限
if (mx < px && my < py) {
// 鼠标在第二象限
angle = 360 - angle;
}
// console.log('angle: ', angle);
return angle;
}
export function removeItemFromArr(arr, item) {
const index = arr.indexOf(item);
if (index !== -1) {
......@@ -1705,22 +1494,29 @@ export function removeItemFromArr(arr, item) {
}
}
export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = 1, callBack = null, easing = null) {
export function circleMove(
item,
x0,
y0,
time = 2,
addR = 360,
xPer = 1,
yPer = 1,
callBack = null,
easing = null
) {
const r = getPosDistance(item.x, item.y, x0, y0);
let a = getAngleByPos(item.x, item.y, x0, y0);
a += 90;
const obj = {r, a};
const obj = { r, a };
item._circleAngle = a;
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) {
tween.onComplete(() => {
......@@ -1731,14 +1527,13 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
tween.easing(easing);
}
tween.onUpdate( (item, progress) => {
tween.onUpdate((item, progress) => {
// console.log(item._circleAngle);
const r = obj.r;
const a = item._circleAngle;
const x = x0 + r * xPer * Math.cos(a * Math.PI / 180);
const y = y0 + r * yPer * Math.sin(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);
item.x = x;
item.y = y;
......@@ -1749,12 +1544,10 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
tween.start();
}
export function getPosDistance(sx, sy, ex, ey) {
const _x = ex - sx;
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;
}
......@@ -1769,24 +1562,30 @@ export function delayCall(callback, second) {
.start();
}
export function formatTime(fmt, date) {
// "yyyy-MM-dd HH:mm:ss";
const o = {
'M+': date.getMonth() + 1, // 月份
'd+': date.getDate(), // 日
'h+': date.getHours(), // 小时
'm+': date.getMinutes(), // 分
's+': date.getSeconds(), // 秒
'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
S: date.getMilliseconds() // 毫秒
"M+": date.getMonth() + 1, // 月份
"d+": date.getDate(), // 日
"h+": date.getHours(), // 小时
"m+": date.getMinutes(), // 分
"s+": date.getSeconds(), // 秒
"q+": Math.floor((date.getMonth() + 3) / 3), // 季度
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) {
if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1)
? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length === 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
);
}
}
return fmt;
......@@ -1799,11 +1598,7 @@ export function getMinScale(item, maxLen) {
return minS;
}
export function jelly(item, time = 0.7) {
if (item.jellyTween) {
TWEEN.remove(item.jellyTween);
}
......@@ -1819,10 +1614,16 @@ export function jelly(item, time = 0.7) {
return;
}
const data = arr[index];
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
index ++;
run();
}, TWEEN.Easing.Sinusoidal.InOut);
const t = tweenChange(
item,
{ scaleX: data[0], scaleY: data[1] },
data[2],
() => {
index++;
run();
},
TWEEN.Easing.Sinusoidal.InOut
);
item.jellyTween = t;
};
......@@ -1834,17 +1635,19 @@ export function jelly(item, time = 0.7) {
[baseSX * 1.0, baseSY * 1.0, t * 2],
];
run();
}
export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) {
for (let i = 0; i < num; i ++) {
export function showPopParticle(
img,
pos,
parent,
num = 20,
minLen = 40,
maxLen = 80,
showTime = 0.4
) {
for (let i = 0; i < num; i++) {
const particle = new MySprite();
particle.init(img);
particle.x = pos.x;
......@@ -1866,36 +1669,27 @@ export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen
const randomL = minLen + Math.random() * (maxLen - minLen);
const randomA = 360 * Math.random();
const randomT = getPosByAngle(randomA, randomL);
moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, showTime, () => {
}, TWEEN.Easing.Exponential.Out);
moveItem(
particle,
particle.x + randomT.x,
particle.y + randomT.y,
showTime,
() => {},
TWEEN.Easing.Exponential.Out
);
// scaleItem(particle, 0, 0.6, () => {
//
// });
scaleItem(particle, randomS, 0.6, () => {
}, TWEEN.Easing.Exponential.Out);
scaleItem(particle, randomS, 0.6, () => {}, TWEEN.Easing.Exponential.Out);
setTimeout(() => {
hideItem(particle, 0.4, () => {
}, TWEEN.Easing.Cubic.In);
hideItem(particle, 0.4, () => {}, TWEEN.Easing.Cubic.In);
}, showTime * 0.5 * 1000);
}
}
export function shake(item, time = 0.5, callback = null, rate = 1) {
if (item.shakeTween) {
return;
}
......@@ -1907,45 +1701,67 @@ export function shake(item, time = 0.5, callback = null, rate = 1) {
const baseY = item.y;
const easing = TWEEN.Easing.Sinusoidal.InOut;
const move4 = () => {
moveItem(item, baseX, baseY, time / 4, () => {
item.shakeTween = false;
if (callback) {
callback();
}
}, easing);
moveItem(
item,
baseX,
baseY,
time / 4,
() => {
item.shakeTween = false;
if (callback) {
callback();
}
},
easing
);
};
const move3 = () => {
moveItem(item, baseX + offX / 4, baseY + offY / 4, time / 4, () => {
move4();
}, easing);
moveItem(
item,
baseX + offX / 4,
baseY + offY / 4,
time / 4,
() => {
move4();
},
easing
);
};
const move2 = () => {
moveItem(item, baseX - offX / 4 * 3, baseY - offY / 4 * 3, time / 4, () => {
move3();
}, easing);
moveItem(
item,
baseX - (offX / 4) * 3,
baseY - (offY / 4) * 3,
time / 4,
() => {
move3();
},
easing
);
};
const move1 = () => {
moveItem(item, baseX + offX, baseY + offY, time / 7.5, () => {
move2();
}, easing);
moveItem(
item,
baseX + offX,
baseY + offY,
time / 7.5,
() => {
move2();
},
easing
);
};
move1();
}
// --------------- custom class --------------------
// --------------- custom class --------------------
export class HotZoneItem extends MySprite {
lineDashFlag = false;
arrow: MySprite;
label: Label;
......@@ -1961,8 +1777,8 @@ export class HotZoneItem extends MySprite {
isAnimaStyle = false;
rectFillColor = '#ffffff';
rectEdgeColor = '#1bfff7';
rectFillColor = "#ffffff";
rectEdgeColor = "#1bfff7";
public itemName;
private _itemType;
......@@ -1979,7 +1795,6 @@ export class HotZoneItem extends MySprite {
this.width = w;
this.height = h;
const rect = new ShapeRect(this.ctx);
rect.x = -w / 2;
rect.y = -h / 2;
......@@ -1990,19 +1805,16 @@ export class HotZoneItem extends MySprite {
}
showLabel(text = null) {
if (!this.label) {
this.label = new Label(this.ctx);
this.label.anchorY = 0;
this.label.fontSize = 40;
this.label.textAlign = 'center';
this.label.textAlign = "center";
this.addChild(this.label);
// this.label.scaleX = 1 / this.scaleX;
// this.label.scaleY = 1 / this.scaleY;
this.refreshLabelScale();
}
if (text) {
......@@ -2011,11 +1823,12 @@ export class HotZoneItem extends MySprite {
this.label.text = this.title;
}
this.label.visible = true;
}
hideLabel() {
if (!this.label) { return; }
if (!this.label) {
return;
}
this.label.visible = false;
}
......@@ -2039,15 +1852,15 @@ export class HotZoneItem extends MySprite {
this.arrow.visible = true;
} else {
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.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.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);
}
......@@ -2055,7 +1868,6 @@ export class HotZoneItem extends MySprite {
}
hideLineDash() {
this.lineDashFlag = false;
if (this.arrow) {
......@@ -2067,11 +1879,13 @@ export class HotZoneItem extends MySprite {
setAnimaStyle(isAnimaStyle) {
this.isAnimaStyle = isAnimaStyle;
console.log('in setAnimaStyle ')
console.log("in setAnimaStyle ");
}
drawArrow() {
if (!this.arrow) { return; }
if (!this.arrow) {
return;
}
const rect = this.getBoundingBox();
this.arrow.x = rect.x + rect.width;
......@@ -2079,25 +1893,20 @@ export class HotZoneItem extends MySprite {
this.arrow.update();
if (!this.isAnimaStyle) {
this.arrowTop.x = rect.x + rect.width / 2;
this.arrowTop.y = rect.y;
this.arrowTop.update();
this.arrowRight.x = rect.x + rect.width;
this.arrowRight.y = rect.y + rect.height / 2;
this.arrowRight.update();
}
}
drawFrame() {
this.ctx.save();
const rect = this.getBoundingBox();
const w = rect.width;
......@@ -2108,28 +1917,21 @@ export class HotZoneItem extends MySprite {
this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = this.rectEdgeColor;
// this.ctx.fillStyle = '#ffffff';
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.fill();
this.ctx.stroke();
if(this.showColorMask) {
this.ctx.fillStyle = '#FF0';
this.ctx.fill();
}
this.ctx.stroke();
this.ctx.restore();
}
draw() {
......@@ -2137,48 +1939,41 @@ export class HotZoneItem extends MySprite {
if (this.lineDashFlag) {
this.drawFrame();
this.drawArrow();
if(!this.hideArrow) {
this.drawArrow();
}
}
}
}
export class HotZoneMultRect extends HotZoneItem {
item;
drawLine() {
if (!this.item) {
return;
}
this.ctx.save();
const rect = this.getBoundingBox();
const w = rect.width;
const h = rect.height;
const x = rect.x //+ w / 2;
const y = rect.y //+ h / 2;
const x = rect.x; //+ w / 2;
const y = rect.y; //+ h / 2;
this.ctx.setLineDash([4, 4]);
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = '#ffa568';
this.ctx.strokeStyle = "#ffa568";
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.fill();
this.ctx.stroke();
this.ctx.restore();
}
draw() {
super.draw();
......@@ -2189,9 +1984,7 @@ export class HotZoneMultRect extends HotZoneItem {
}
export class HotZoneImg extends MySprite {
drawFrame() {
this.ctx.save();
const rect = this.getBoundingBox();
......@@ -2202,10 +1995,10 @@ export class HotZoneImg extends MySprite {
this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7';
this.ctx.strokeStyle = "#1bfff7";
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);
......@@ -2213,21 +2006,17 @@ export class HotZoneImg extends MySprite {
// this.ctx.fill();
this.ctx.stroke();
this.ctx.restore();
}
draw() {
super.draw();
this.drawFrame();
}
}
export class HotZoneLabel extends Label {
drawFrame() {
this.ctx.save();
const rect = this.getBoundingBox();
......@@ -2238,10 +2027,10 @@ export class HotZoneLabel extends Label {
this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7';
this.ctx.strokeStyle = "#1bfff7";
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);
......@@ -2249,38 +2038,28 @@ export class HotZoneLabel extends Label {
// this.ctx.fill();
this.ctx.stroke();
this.ctx.restore();
}
draw() {
super.draw();
this.drawFrame();
}
getLabelRect() {
const rect = this.getBoundingBox();
const width = rect.width / this.scaleX;
const height = this.height * this.scaleY;
const x = this.x - width / 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 {
lineDashFlag = true;
item;
......@@ -2289,18 +2068,15 @@ export class DragItem extends MySprite {
this.anchorY = 0.5;
this.initCenterCircle();
}
setSize(w, h) {
this.anchorX = 0.5;
this.anchorY = 0.5;
this.width = w;
this.height = h;
// const rect = new ShapeRect(this.ctx);
// rect.x = -w / 2;
// rect.y = -h / 2;
......@@ -2308,14 +2084,12 @@ export class DragItem extends MySprite {
// rect.fillColor = '#000000';
// rect.alpha = 0.1;
// this.addChild(rect);
}
initCenterCircle() {
const circle = new ShapeCircle(this.ctx);
circle.setRadius(10);
circle.fillColor = '#ffa568'
circle.fillColor = "#ffa568";
this.addChild(circle);
this.width = circle.width;
......@@ -2323,7 +2097,7 @@ export class DragItem extends MySprite {
}
getPosition() {
return {x: this.x, y: this.y};
return { x: this.x, y: this.y };
}
drawLine() {
......@@ -2331,70 +2105,51 @@ export class DragItem extends MySprite {
return;
}
this.ctx.save();
const rect = this.getBoundingBox();
const w = rect.width;
const h = rect.height;
const x = rect.x //+ w / 2;
const y = rect.y //+ h / 2;
const x = rect.x; //+ w / 2;
const y = rect.y; //+ h / 2;
this.ctx.setLineDash([4, 4]);
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = '#ffa568';
this.ctx.strokeStyle = "#ffa568";
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.fill();
this.ctx.stroke();
this.ctx.restore();
}
drawFrame() {
this.ctx.save();
const rect = this.getBoundingBox();
const w = rect.width;
const h = rect.height;
const x = rect.x //+ w / 2;
const y = rect.y //+ h / 2;
const x = rect.x; //+ w / 2;
const y = rect.y; //+ h / 2;
this.ctx.setLineDash([4, 4]);
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#ffa568';
this.ctx.strokeStyle = "#ffa568";
// this.ctx.fillStyle = '#ffffff';
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.fill();
this.ctx.stroke();
this.ctx.restore();
}
draw() {
......@@ -2409,7 +2164,6 @@ export class DragItem extends MySprite {
}
export class EditorItem extends MySprite {
lineDashFlag = false;
arrow: MySprite;
label: Label;
......@@ -2418,13 +2172,11 @@ export class EditorItem extends MySprite {
arrowRight;
showLabel(text = null) {
if (!this.label) {
this.label = new Label(this.ctx);
this.label.anchorY = 0;
this.label.fontSize = 50;
this.label.textAlign = 'center';
this.label.textAlign = "center";
this.addChild(this.label);
this.label.setScaleXY(1 / this.scaleX);
}
......@@ -2435,11 +2187,12 @@ export class EditorItem extends MySprite {
this.label.text = this.text;
}
this.label.visible = true;
}
hideLabel() {
if (!this.label) { return; }
if (!this.label) {
return;
}
this.label.visible = false;
}
......@@ -2451,7 +2204,7 @@ export class EditorItem extends MySprite {
this.arrow.visible = true;
} else {
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.arrowTop = new MySprite(this.ctx);
......@@ -2467,7 +2220,6 @@ export class EditorItem extends MySprite {
}
hideLineDash() {
this.lineDashFlag = false;
if (this.arrow) {
......@@ -2480,15 +2232,15 @@ export class EditorItem extends MySprite {
refreshLabelScale() {}
drawArrow() {
if (!this.arrow) { return; }
if (!this.arrow) {
return;
}
const rect = this.getBoundingBox();
this.arrow.x = rect.x + rect.width;
this.arrow.y = rect.y;
this.arrow.update();
// this.arrowTop.x = rect.x + rect.width / 2;
// this.arrowTop.y = rect.y;
// this.arrowTop.update();
......@@ -2499,11 +2251,8 @@ export class EditorItem extends MySprite {
}
drawFrame() {
this.ctx.save();
const rect = this.getBoundingBox();
const w = rect.width;
......@@ -2513,39 +2262,28 @@ export class EditorItem extends MySprite {
this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7';
this.ctx.strokeStyle = "#1bfff7";
// this.ctx.fillStyle = '#ffffff';
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.fill();
this.ctx.stroke();
this.ctx.restore();
}
draw() {
super.draw();
if (this.lineDashFlag) {
this.drawFrame();
this.drawArrow();
if(!this.hideArrow) {
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>
<div class="preview-box" #wrap>
<div #previewBoxRef class="preview-box" #wrap>
<canvas id="canvas" #canvas></canvas>
</div>
<div nz-row nzType="flex" nzAlign="middle">
<div nz-col nzSpan="5" nzOffset="1">
<h5> add background: </h5>
<div class="bg-box">
<app-upload-image-with-preview
[picUrl]="bgItem?.url"
......@@ -20,10 +15,9 @@
</div>
<div nz-col nzSpan="5" nzOffset="1" class="img-box" *ngFor="let it of hotZoneArr; let i = index">
<div
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>
<div 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>
<button style="float: right;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)">
X
</button>
......@@ -35,7 +29,7 @@
<input type="text" nz-input [(ngModel)]="it.itemName" (blur)="saveText(it)" style="margin-left: 20px;">
</div>
<div style="margin-bottom: 5px">
<!-- <div style="margin-bottom: 5px">
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)">
<label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
<label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
......@@ -59,15 +53,12 @@
[audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder>
</div>
</div> -->
</div>
</div>
<div nz-col nzSpan="5" nzOffset="1">
<div class="bg-box">
<button nz-button nzType="dashed" (click)="addBtnClick()"
class="add-btn">
......@@ -76,49 +67,81 @@
Add hot zone
</button>
</div>
</div>
</div>
<nz-divider></nz-divider>
<div class="save-box">
<label nz-checkbox [(ngModel)]="inAdjustMode">微调模式</label>
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()" >
<i nz-icon nzType="save"></i>
Save
</button>
</div>
<div *ngIf="inAdjustMode" style="position: absolute; top: 0; right: 10px; width: 150px; height: 300px; background-color: #EEE;">
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">名称:</span>
<input type="text" nz-input [(ngModel)]="currentSetting.itemName" style="display: inline-block; width: 100px;">
</p>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">宽:</span>
<input type="text" nz-input [(ngModel)]="currentSetting.width" style="display: inline-block; width: 100px;">
</p>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">高:</span>
<input type="text" nz-input [(ngModel)]="currentSetting.height" style="display: inline-block; width: 100px;">
</p>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">x:</span>
<input type="text" nz-input [(ngModel)]="currentSetting.x" style="display: inline-block; width: 100px;">
</p>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;">
<span style="position: absolute; left: 5px; height: 32px; line-height: 32px;">y:</span>
<input type="text" nz-input [(ngModel)]="currentSetting.y" style="display: inline-block; width: 100px;">
</p>
<p style="padding-left: 20px; position: relative; height: 32px; text-align: center;">
<button nz-button nzSize="mini" (click)="handleClickUpdateHotZoneParams()" nzType="primary">更新</button>
</p>
<div #toolBoxRef class="hotzone-toolbox" [class]="{ 'fix-top': toolBoxFixTop}">
<div class="tool-item">
<span class="item-name">名称:</span>
<input class="edit" type="text" nz-input [(ngModel)]="currentSetting.itemName">
</div>
<div class="tool-item">
<span class="item-name">宽:</span>
<input class="edit" type="text" nz-input [(ngModel)]="currentSetting.width">
</div>
<div class="tool-item">
<span class="item-name">高:</span>
<input class="edit" type="text" nz-input [(ngModel)]="currentSetting.height">
</div>
<div class="tool-item">
<span class="item-name">x:</span>
<input class="edit" type="text" nz-input [(ngModel)]="currentSetting.x">
</div>
<div class="tool-item">
<span class="item-name">y:</span>
<input class="edit" type="text" nz-input [(ngModel)]="currentSetting.y">
</div>
<div class="tool-item">
<button nz-button nzSize="mini" (click)="handleClickUpdateHotZoneParams()" nzType="primary">设置</button>
</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>
......
......@@ -89,7 +89,67 @@ h5 {
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 {
@ViewChild('canvas', {static: true}) canvas: 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()
isHasRect = true;
......@@ -83,14 +87,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
oldPos;
radioValue;
curItem;
curItems = []; // 多选热区 布局调整
bg: MySprite;
changeSizeFlag = false;
changeTopSizeFlag = false;
changeRightSizeFlag = false;
// 微调模式
inAdjustMode = false;
// 布局模式
inLayoutMode = false;
// 当前微调的对象
currentSetting = {
index: -1,
......@@ -121,6 +126,35 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
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() {
......@@ -515,11 +549,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
mapDown(event) {
console.log(event)
this.oldPos = {x: this.mx, y: this.my};
for (let i = 0; i < this.hotZoneArr.length; i++) {
const item = this.hotZoneArr[i];
let callback;
let target;
......@@ -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 {
}
setCurItemSize(size) {
console.log(size, this.curItem)
const curItem = this.hotZoneArr[size.index]
let sx = size.width / curItem.width;
......@@ -682,15 +717,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
changeCurItem(item) {
this.hideAllLineDash();
this.curItem = item;
this.curItem.showLineDash();
}
hideAllLineDash() {
for (let i = 0; i < this.imgArr.length; i++) {
if (this.imgArr[i].picItem) {
this.imgArr[i].picItem.hideLineDash();
......@@ -723,7 +755,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.updateArr(this.hotZoneArr);
this.updatePos()
TWEEN.update();
}
......@@ -942,30 +973,241 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
private clickedHotZoneRect(item: any) {
if (this.checkClickTarget(item)) {
if (!this.inAdjustMode && item.lineDashFlag && this.checkClickTarget(item.arrow)) {
if (!this.inLayoutMode && item.lineDashFlag && this.checkClickTarget(item.arrow)) {
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);
} else if (!this.inAdjustMode && item.lineDashFlag && this.checkClickTarget(item.arrowRight)) {
} else if (!this.inLayoutMode && item.lineDashFlag && this.checkClickTarget(item.arrowRight)) {
this.changeItemRightSize(item);
} else {
this.changeCurItem(item);
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.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);
item.showColorMask = true;
const bd = item.getBoundingBox()
const rectParams = {
index: item.index,
itemName: item.itemName,
x: bd.x,
y: bd.y,
width: bd.width,
height: bd.height,
}
this.currentSetting = rectParams;
}
this.currentSetting = rectParams;
}
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() {
this.setCurItemSize({
......@@ -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) {
if (this.checkClickTarget(item)) {
this.curItem = item;
......
......@@ -64,7 +64,6 @@
<nz-option [nzValue]="SORT_WORDS" nzLabel="单词排序"></nz-option>
<nz-option [nzValue]="IMAGE_SELECT" nzLabel="图片选项" nzDisabled></nz-option>
<nz-option [nzValue]="PRONUNCIATION_ASSESSMENT" nzLabel="语音评测" nzDisabled></nz-option>
</nz-select>
<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;">
......
......@@ -6,6 +6,7 @@ import {
OnChanges,
OnInit,
Output,
HostListener,
ApplicationRef,
ChangeDetectorRef,
AfterViewInit
......@@ -50,6 +51,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
CROSSWORD_PUZZLE = "9";
SORT_WORDS = "10";
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