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

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

parent f0c7c95c
......@@ -3,7 +3,9 @@ import {
MySprite, ShapeRectNew,
ShapeCircle,
tweenChange,
ShapeRect
ShapeRect,
Lable2,
LableText
} from './Unit';
import {
......@@ -22,7 +24,7 @@ export class Exercises {
bg;
textLabelArr = [];
textLabel : Lable2;
bigCard;
......@@ -158,11 +160,11 @@ export class Exercises {
/**
* 设置x坐标
* @param textLabelArr
* @param textLabel
* @param totalWidth
* @param skin
*/
private resetX(textLabelArr, totalWidth, skin){
private resetX(textLabel, totalWidth, skin){
var startX = 0;
......@@ -173,33 +175,36 @@ export class Exercises {
startX = this.scaleX * 100;
}
for (let i = 0; i < textLabelArr.length; ++i) {
var textLabel = textLabelArr[i];
textLabel.x = startX;
startX += textLabel.getBoundingBox().width;
}
textLabel.x = startX;
}
private addText(bg: ShapeRectNew, skin) {
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) {
var letter = this.exercisesData.letters[i];
//内容
const text = new Label();
text.text = letter.val;
text.fontName = "GOTHIC";
let fontColor = "";
let labelText = new LableText();
labelText.val = letter.val;
let fontSize = 48;
let fontColor = "";
if (skin == 'B') {
if (letter.isColor === '0') {
......@@ -211,7 +216,7 @@ export class Exercises {
}
else {
fontSize = 56;
if (letter.isColor === '0') {
fontColor = "#000000";
}
......@@ -219,21 +224,21 @@ export class Exercises {
fontColor = "#cc2a2e";
}
}
text.fontColor = fontColor;
text.fontSize = fontSize;
text.y = bg.height / 2;
this.textLabelArr.push(text);
text.refreshSize();
totalWidth += text.getBoundingBox().width;
bg.addChild(text);
labelText.fontColor = fontColor;
textArr.push(labelText);
}
//计算最大的scale
totalWidth = this.setMaxScale(this.textLabelArr, bg.width - 96 * this.scaleX);
text.refreshSize();
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) {
......@@ -331,7 +336,7 @@ export class Exercises {
const constantBg = new ShapeRect();
constantBg.setSize(width, height);
constantBg.fillColor = '#FFFFFF';
constantBg.fillColor = '#ffffff';
constantBg.alpha = 1;
constantBg.visible = false;
constantBg.x = 20 * parent.scaleX;
......@@ -346,18 +351,21 @@ export class Exercises {
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) {
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 = "";
if (skin == 'B') {
......@@ -367,8 +375,10 @@ export class Exercises {
else {
fontColor = "#cc2a2e";
}
}
else {
if (letter.isColor === '0') {
fontColor = "#000000";
}
......@@ -376,32 +386,20 @@ export class Exercises {
fontColor = "#cc2a2e";
}
}
text.fontColor = fontColor;
text.fontSize = fontSize;
text.y = bg.height / 2;
textLabelArr.push(text);
text.refreshSize();
totalWidth += text.getBoundingBox().width;
labelText.fontColor = fontColor;
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);
......@@ -418,25 +416,22 @@ export class Exercises {
const addText = (bg: ShapeRect, skin, fontSize) => {
let totalWidth = 0;
var textLabelArr = [];
let text = new Lable2();
text.fontName = "GOTHICB";
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) {
var letter = this.exercisesData.letters[i];
//内容
const text = new Label();
text.text = letter.val;
let labelText = new LableText();
labelText.val = letter.val;
text.fontName = "GOTHICB";
let fontColor = "";
if (skin == 'B') {
if (letter.isColor === '0') {
fontColor = "#717071";
......@@ -453,34 +448,24 @@ export class Exercises {
fontColor = "#cc2a2e";
}
}
text.fontColor = fontColor;
text.fontSize = fontSize;
text.y = bg.height - text.getBoundingBox().height / 2 - 40 * this.scaleY;
textLabelArr.push(text);
text.refreshSize();
totalWidth += text.getBoundingBox().width;
labelText.fontColor = fontColor;
sHeight = text.getBoundingBox().height;
height = text.height;
textArr.push(labelText);
}
totalWidth = this.setMaxScale(textLabelArr, (960 - 90) * this.scaleX);
var startX = (bg.width - totalWidth) / 2;
for (let i = 0; i < textLabelArr.length; ++i) {
var textLabel = textLabelArr[i];
text.setMaxSize((960 - 90) * this.scaleX);
text.refreshSize();
text.y = bg.height - text.getBoundingBox().height / 2 - 7 * this.scaleY;
let totalWidth = text.getBoundingBox().width;
text.x = (bg.width - totalWidth) / 2;
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 };
}
......@@ -662,17 +647,12 @@ export class Exercises {
var totalWidth = 0
for (let i = 0; i < this.textLabelArr.length; ++i) {
var textLabel = this.textLabelArr[i];
textLabel.setScaleXY(scale);
this.textLabel.setScaleXY(scale);
this.textLabel.refreshSize();
textLabel.refreshSize();
totalWidth += textLabel.getBoundingBox().width;
}
totalWidth = this.textLabel.getBoundingBox().width;
this.resetX(this.textLabelArr, totalWidth, skin);
this.resetX(this.textLabel, totalWidth, skin);
}
playAudio(callback = null) {
......
......@@ -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 {
textArr = [];
......
......@@ -837,17 +837,12 @@ export class PlayComponent implements OnInit, OnDestroy {
//获取最小字体
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) {
let textLabel = textLabelArr[j];
if (minScale > textLabel.scaleX) {
minScale = textLabel.scaleX;
}
if (minScale > textLabel.scaleX) {
minScale = textLabel.scaleX;
}
}
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