Commit 8ccb5248 authored by Chen Jiping's avatar Chen Jiping

fix:修复单词因浏览器放大缩小导致挤在一起的问题

parent f0c7c95c
...@@ -3,7 +3,9 @@ import { ...@@ -3,7 +3,9 @@ import {
MySprite, ShapeRectNew, MySprite, ShapeRectNew,
ShapeCircle, ShapeCircle,
tweenChange, tweenChange,
ShapeRect ShapeRect,
Lable2,
LableText
} from './Unit'; } from './Unit';
import { import {
...@@ -22,7 +24,7 @@ export class Exercises { ...@@ -22,7 +24,7 @@ export class Exercises {
bg; bg;
textLabelArr = []; textLabel : Lable2;
bigCard; bigCard;
...@@ -158,11 +160,11 @@ export class Exercises { ...@@ -158,11 +160,11 @@ export class Exercises {
/** /**
* 设置x坐标 * 设置x坐标
* @param textLabelArr * @param textLabel
* @param totalWidth * @param totalWidth
* @param skin * @param skin
*/ */
private resetX(textLabelArr, totalWidth, skin){ private resetX(textLabel, totalWidth, skin){
var startX = 0; var startX = 0;
...@@ -173,33 +175,36 @@ export class Exercises { ...@@ -173,33 +175,36 @@ export class Exercises {
startX = this.scaleX * 100; startX = this.scaleX * 100;
} }
for (let i = 0; i < textLabelArr.length; ++i) { textLabel.x = startX;
var textLabel = textLabelArr[i];
textLabel.x = startX;
startX += textLabel.getBoundingBox().width;
}
} }
private addText(bg: ShapeRectNew, skin) { private addText(bg: ShapeRectNew, skin) {
let totalWidth = 0; let totalWidth = 0;
let text = new Lable2();
text.fontName = "GOTHIC";
let fontSize = 48;
if (skin == 'B'){
fontSize = 48;
}
else{
fontSize = 56;
}
text.fontSize = fontSize;
let textArr = new Array<LableText>();
text.textArr = textArr;
for (let i = 0; i < this.exercisesData.letters.length; ++i) { for (let i = 0; i < this.exercisesData.letters.length; ++i) {
var letter = this.exercisesData.letters[i]; var letter = this.exercisesData.letters[i];
//内容 let labelText = new LableText();
const text = new Label(); labelText.val = letter.val;
text.text = letter.val;
text.fontName = "GOTHIC";
let fontColor = "";
let fontSize = 48; let fontColor = "";
if (skin == 'B') { if (skin == 'B') {
if (letter.isColor === '0') { if (letter.isColor === '0') {
...@@ -211,7 +216,7 @@ export class Exercises { ...@@ -211,7 +216,7 @@ export class Exercises {
} }
else { else {
fontSize = 56;
if (letter.isColor === '0') { if (letter.isColor === '0') {
fontColor = "#000000"; fontColor = "#000000";
} }
...@@ -219,21 +224,21 @@ export class Exercises { ...@@ -219,21 +224,21 @@ export class Exercises {
fontColor = "#cc2a2e"; fontColor = "#cc2a2e";
} }
} }
text.fontColor = fontColor; labelText.fontColor = fontColor;
text.fontSize = fontSize;
text.y = bg.height / 2; textArr.push(labelText);
this.textLabelArr.push(text);
text.refreshSize();
totalWidth += text.getBoundingBox().width;
bg.addChild(text);
} }
//计算最大的scale text.refreshSize();
totalWidth = this.setMaxScale(this.textLabelArr, bg.width - 96 * this.scaleX); text.y = bg.height / 2;
totalWidth = text.getBoundingBox().width;
bg.addChild(text);
text.setMaxSize(bg.width - 96 * this.scaleX);
this.textLabel = text;
this.resetX(this.textLabelArr, totalWidth, this.skin); this.resetX(text, totalWidth, this.skin);
} }
private initB(scaleX = 1, scaleY = 1, type) { private initB(scaleX = 1, scaleY = 1, type) {
...@@ -331,7 +336,7 @@ export class Exercises { ...@@ -331,7 +336,7 @@ export class Exercises {
const constantBg = new ShapeRect(); const constantBg = new ShapeRect();
constantBg.setSize(width, height); constantBg.setSize(width, height);
constantBg.fillColor = '#FFFFFF'; constantBg.fillColor = '#ffffff';
constantBg.alpha = 1; constantBg.alpha = 1;
constantBg.visible = false; constantBg.visible = false;
constantBg.x = 20 * parent.scaleX; constantBg.x = 20 * parent.scaleX;
...@@ -346,18 +351,21 @@ export class Exercises { ...@@ -346,18 +351,21 @@ export class Exercises {
const addText = (bg: ShapeRect, skin, fontSize) => { const addText = (bg: ShapeRect, skin, fontSize) => {
let totalWidth = 0; let text = new Lable2();
text.fontName = "GOTHICB";
let textLabelArr = []; text.fontSize = fontSize;
let textArr = new Array<LableText>();
text.textArr = textArr;
for (let i = 0; i < this.exercisesData.letters.length; ++i) { for (let i = 0; i < this.exercisesData.letters.length; ++i) {
let letter = this.exercisesData.letters[i]; var letter = this.exercisesData.letters[i];
let labelText = new LableText();
labelText.val = letter.val;
//内容
const text = new Label();
text.text = letter.val;
text.fontName = "GOTHICB";
let fontColor = ""; let fontColor = "";
if (skin == 'B') { if (skin == 'B') {
...@@ -367,8 +375,10 @@ export class Exercises { ...@@ -367,8 +375,10 @@ export class Exercises {
else { else {
fontColor = "#cc2a2e"; fontColor = "#cc2a2e";
} }
} }
else { else {
if (letter.isColor === '0') { if (letter.isColor === '0') {
fontColor = "#000000"; fontColor = "#000000";
} }
...@@ -376,32 +386,20 @@ export class Exercises { ...@@ -376,32 +386,20 @@ export class Exercises {
fontColor = "#cc2a2e"; fontColor = "#cc2a2e";
} }
} }
text.fontColor = fontColor; labelText.fontColor = fontColor;
text.fontSize = fontSize;
text.y = bg.height / 2;
textLabelArr.push(text);
text.refreshSize();
totalWidth += text.getBoundingBox().width;
textArr.push(labelText);
} }
totalWidth = this.setMaxScale(textLabelArr, 960 * this.scaleX);
var startX = (bg.width - totalWidth) / 2;
for (let i = 0; i < textLabelArr.length; ++i) {
var textLabel = textLabelArr[i];
textLabel.x = startX; text.setMaxSize(960 * this.scaleX);
text.refreshSize();
text.y = bg.height / 2;
let totalWidth = text.getBoundingBox().width;
text.x = (bg.width - totalWidth) / 2;
startX += textLabel.getBoundingBox().width;
bg.addChild(textLabel); bg.addChild(text);
}
} }
const contentBg = this.getContentBg(parent); const contentBg = this.getContentBg(parent);
...@@ -418,25 +416,22 @@ export class Exercises { ...@@ -418,25 +416,22 @@ export class Exercises {
const addText = (bg: ShapeRect, skin, fontSize) => { const addText = (bg: ShapeRect, skin, fontSize) => {
let totalWidth = 0; let text = new Lable2();
text.fontName = "GOTHICB";
var textLabelArr = [];
var sHeight = 0; text.fontSize = fontSize;
let height = 0; let textArr = new Array<LableText>();
text.textArr = textArr;
for (let i = 0; i < this.exercisesData.letters.length; ++i) { for (let i = 0; i < this.exercisesData.letters.length; ++i) {
var letter = this.exercisesData.letters[i]; var letter = this.exercisesData.letters[i];
//内容 let labelText = new LableText();
const text = new Label(); labelText.val = letter.val;
text.text = letter.val;
text.fontName = "GOTHICB";
let fontColor = ""; let fontColor = "";
if (skin == 'B') { if (skin == 'B') {
if (letter.isColor === '0') { if (letter.isColor === '0') {
fontColor = "#717071"; fontColor = "#717071";
...@@ -453,34 +448,24 @@ export class Exercises { ...@@ -453,34 +448,24 @@ export class Exercises {
fontColor = "#cc2a2e"; fontColor = "#cc2a2e";
} }
} }
text.fontColor = fontColor;
text.fontSize = fontSize; labelText.fontColor = fontColor;
text.y = bg.height - text.getBoundingBox().height / 2 - 40 * this.scaleY;
textLabelArr.push(text);
text.refreshSize();
totalWidth += text.getBoundingBox().width;
sHeight = text.getBoundingBox().height; textArr.push(labelText);
height = text.height;
} }
totalWidth = this.setMaxScale(textLabelArr, (960 - 90) * this.scaleX); text.setMaxSize((960 - 90) * this.scaleX);
text.refreshSize();
var startX = (bg.width - totalWidth) / 2; text.y = bg.height - text.getBoundingBox().height / 2 - 7 * this.scaleY;
let totalWidth = text.getBoundingBox().width;
for (let i = 0; i < textLabelArr.length; ++i) { text.x = (bg.width - totalWidth) / 2;
var textLabel = textLabelArr[i];
textLabel.x = startX;
startX += textLabel.getBoundingBox().width; bg.addChild(text);
bg.addChild(textLabel); var sHeight = text.getBoundingBox().height;
} let height = text.height;
return { height: height, sHeight: sHeight }; return { height: height, sHeight: sHeight };
} }
...@@ -662,17 +647,12 @@ export class Exercises { ...@@ -662,17 +647,12 @@ export class Exercises {
var totalWidth = 0 var totalWidth = 0
for (let i = 0; i < this.textLabelArr.length; ++i) { this.textLabel.setScaleXY(scale);
var textLabel = this.textLabelArr[i]; this.textLabel.refreshSize();
textLabel.setScaleXY(scale);
textLabel.refreshSize(); totalWidth = this.textLabel.getBoundingBox().width;
totalWidth += textLabel.getBoundingBox().width;
}
this.resetX(this.textLabelArr, totalWidth, skin); this.resetX(this.textLabel, totalWidth, skin);
} }
playAudio(callback = null) { playAudio(callback = null) {
......
...@@ -645,6 +645,167 @@ export class Label extends MySprite { ...@@ -645,6 +645,167 @@ export class Label extends MySprite {
} }
export class LableText{
private _val:string;
private _fontColor = "#000000";
private _underLine : boolean = false;
set val(val){
this._val = val;
}
get val(){
return this._val;
}
set fontColor(fontColor){
this._fontColor = fontColor;
}
get fontColor(){
return this._fontColor;
}
set underLine(underLine){
this._underLine = underLine;
}
get underLine(){
return this._underLine;
}
}
export class Lable2 extends MySprite{
textArr: Array<LableText> = [];
fontName = 'Verdana';
textAlign = 'left';
fontSize = 40;
fontColor = '#000000';
fontWeight = 900;
_maxWidth;
outline = 0;
outlineColor = '#ffffff';
_outlineFlag = false;
_outLineWidth;
_outLineColor;
constructor(ctx = null) {
super(ctx);
this.init();
}
refreshSize() {
this.ctx.save();
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight;
let text = "";
for(let i = 0; i < this.textArr.length; ++ i){
text += this.textArr[i].val;
}
this._width = this.ctx.measureText(text).width;
this._height = this.fontSize;
this.refreshAnchorOff();
this.ctx.restore();
}
setMaxSize(w) {
this._maxWidth = w;
this.refreshSize();
if (this.width >= w) {
this.scaleX *= w / this.width;
this.scaleY *= w / this.width;
}
}
show(callBack = null) {
this.visible = true;
if (this.alpha >= 1) {
return;
}
const tween = new TWEEN.Tween(this)
.to({ alpha: 1 }, 800)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => {
if (callBack) {
callBack();
}
})
.start(); // Start the tween immediately.
}
setOutline(width = 5, color = '#ffffff') {
this._outlineFlag = true;
this._outLineWidth = width;
this._outLineColor = color;
}
drawText() {
if (!this.textArr) { return; }
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.fontWeight = this.fontWeight;
var startX = 0;
for(let i = 0; i < this.textArr.length; ++ i){
var text = this.textArr[i];
if (this._outlineFlag) {
this.ctx.lineWidth = this._outLineWidth;
this.ctx.strokeStyle = this._outLineColor;
this.ctx.strokeText(text.val, startX, 0);
}
this.ctx.fillStyle = text.fontColor ? text.fontColor : this.fontColor;
if (this.outline > 0) {
this.ctx.lineWidth = this.outline;
this.ctx.strokeStyle = this.outlineColor;
this.ctx.strokeText(text.val, startX, 0);
}
this.ctx.fillText(text.val, startX, 0);
startX += this.ctx.measureText(text.val).width;
}
}
drawSelf() {
super.drawSelf();
this.drawText();
}
}
export class RichTextOld extends Label { export class RichTextOld extends Label {
textArr = []; textArr = [];
......
...@@ -837,17 +837,12 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -837,17 +837,12 @@ export class PlayComponent implements OnInit, OnDestroy {
//获取最小字体 //获取最小字体
for (let i = 0; i < this.exercisesArr.length; ++i) { for (let i = 0; i < this.exercisesArr.length; ++i) {
let textLabelArr = this.exercisesArr[i].textLabelArr; let textLabel = this.exercisesArr[i].textLabel;
for (let j = 0; j < textLabelArr.length; ++j) { if (minScale > textLabel.scaleX) {
let textLabel = textLabelArr[j]; minScale = textLabel.scaleX;
if (minScale > textLabel.scaleX) {
minScale = textLabel.scaleX;
}
} }
} }
for (let i = 0; i < this.exercisesArr.length; ++i) { for (let i = 0; i < this.exercisesArr.length; ++i) {
......
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