Commit 9bc2d435 authored by Chen Jiping's avatar Chen Jiping

feat:完成模板开发

parent 9f3a2900
......@@ -128,5 +128,8 @@
}
}
},
"defaultProject": "ng-template-generator"
"defaultProject": "ng-template-generator",
"cli": {
"analytics": "d019af0c-e48f-4eee-a358-d8a9d240236a"
}
}
\ No newline at end of file
import { Obj } from "./ObjBean";
export class ExercisesBean extends Obj{
//单词数组
wordArr = [];
picUrl2;
}
export function getDefaultExercises(){
let exercises = new ExercisesBean();
let word = getDefaultWord();
exercises.wordArr.push(word);
return exercises;
}
export class LetterBean extends Obj{
fontColor = "";
}
export function getDefaultLetter(){
let letter = new LetterBean();
return letter;
}
export class WordBean extends Obj{
letterArr = [];
//卡片单词数组
cardWordArr = [];
}
export function getDefaultWord(){
let word = new WordBean();
let cardWord = getDefaultCardWord();
word.cardWordArr.push(cardWord);
return word;
}
export function getDefaultCardWord(){
let cardWord = new Obj();
cardWord['letterArr'] = [];
return cardWord;
}
export class Obj{
/**音频材料 */
audioUrl: String;
/**图片材料 */
picUrl:String;
val : String;
}
\ No newline at end of file
import { Obj } from "./ObjBean";
export class TitleBean extends Obj{
part1 : String;
part2: String;
}
export function getDefaultTile(){
let title = new TitleBean();
title.part1 = "C";
title.part2 = "Read and point";
return title;
}
\ No newline at end of file
This diff is collapsed.
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core';
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { getDefaultCardWord, getDefaultExercises, getDefaultLetter, getDefaultWord, WordBean } from '../bean/ExercisesBean';
import { getDefaultTile } from '../bean/TitleBean';
......@@ -10,12 +12,12 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "test_0011";
saveKey = "YM5-22";
// 储存对象
item;
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
}
......@@ -24,8 +26,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = {};
this.item.title = getDefaultTile();
this.item.letterArr = [];
// 获取存储的数据
(<any> window).courseware.getData((data) => {
(<any>window).courseware.getData((data) => {
if (data) {
this.item = data;
......@@ -50,7 +56,53 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() {
if (!this.item.title) {
this.item.title = getDefaultTile();
}
if (!this.item.letterArr) {
this.item.letterArr = [];
}
if (!this.item.exercisesArr) {
this.item.exercisesArr = [];
}
for (let i = this.item.exercisesArr.length; i < 4; ++i) {
let exercises = getDefaultExercises();
this.item.exercisesArr.push(exercises);
}
for (let i = 0; i < this.item.exercisesArr.length; ++i) {
let exercises = this.item.exercisesArr[i];
if (!exercises.wordArr) {
exercises.wordArr = [];
}
if (exercises.wordArr.length == 0) {
let word = getDefaultWord();
exercises.wordArr.push(word);
}
for (let j = 0; j < exercises.wordArr.length; ++j) {
let word = exercises.wordArr[j];
if (!word.cardWordArr) {
word.cardWordArr = [];
}
if (word.cardWordArr.length == 0) {
let cardWord = getDefaultCardWord();
word.cardWordArr.push(cardWord);
}
}
}
}
......@@ -58,9 +110,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
onImageUploadSuccess(e, item, key) {
this.item[key] = e.url;
item[key] = e.url;
this.save();
}
......@@ -68,9 +120,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
onAudioUploadSuccess(e, item, key) {
this.item[key] = e.url;
item[key] = e.url;
this.save();
}
......@@ -80,7 +132,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据
*/
save() {
(<any> window).courseware.setData(this.item, null, this.saveKey);
(<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh();
}
......@@ -93,5 +145,76 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1);
}
addLetterItem(item) {
let letter = getDefaultLetter();
item.letterArr.push(letter);
item.letterArr = [...item.letterArr];
this.save();
}
delLetter(item, index) {
if (index !== -1) {
item.letterArr.splice(index, 1);
item.letterArr = [...item.letterArr];
this.save();
}
}
addWordItem(exercises, key) {
let word = getDefaultWord();
exercises[key].push(word);
this.save();
}
delWordItem(exercises, key, index) {
if (index !== -1) {
exercises[key].splice(index, 1);
exercises[key] = [...exercises[key]];
this.save();
}
}
saveWord(item) {
let val = "";
if (!item.letterArr) {
item.letterArr = [];
}
for (let i = 0; i < item.letterArr.length; ++i) {
val += item.letterArr[i].val;
}
//值发生改变,则重新处理数据
if (item.val != val) {
item.letterArr = [];
for (let i = 0; i < item.val.length; ++i) {
let letter = getDefaultLetter();
letter.fontColor = "#363333";
letter.val = item.val.charAt(i);
item.letterArr.push(letter);
}
}
this.save();
}
clickLetter(letter, i) {
if (letter.fontColor == "#363333") {
letter.fontColor = "#c8171e";
}
else {
letter.fontColor = "#363333";
}
this.save();
}
}
/**
*
* @param audio 音频
* @param now true-重新开始播放,flase-继续播放
* @param callback
*/
export function playAudio(audio, now = false, callback = null) {
if (audio) {
if (now) {
audio.pause();
audio.currentTime = 0;
}
if (callback) {
audio.onended = () => {
callback();
};
}
audio.play();
}
}
/**
* 暂停播放音频
* @param audio 音频
* @param reset 暂停是否重置:true-是,false-否
* @param callback
*/
export function pauseAudio(audio, reset = false, callback = null) {
if (audio) {
if (reset) {
audio.currentTime = 0;
}
audio.pause();
if (callback) {
callback();
}
}
}
\ No newline at end of file
import { Label, Label2, LabelText, MySprite, ShapeRect, tweenChange } from "./Unit";
export class BigCard{
data;
images;
scaleX = 1;
scaleY = 1;
bg : ShapeRect;
closePic : MySprite;
shown = false;
contentSpr;
init(images, scaleX = 1, scaleY = 1) {
this.images = images;
this.scaleX = scaleX;
this.scaleY = scaleY;
this.initView();
}
private initView(){
let w = 1040 * this.scaleX;
let h = 640 * this.scaleY
const bg = new ShapeRect();
bg.setSize(w, h);
this.bg = bg;
bg.alpha = 0;
this.initCard();
this.closePic = this.getColsePic(this.bg);
this.bg.setScaleXY(0);
}
private initCard(){
const card = new MySprite();
card.init(this.images.get('card'));
card.setScaleXY(this.scaleX);
card.x = this.bg.width / 2;
card.y = this.bg.height / 2;
this.bg.addChild(card);
}
private getColsePic(parent) {
const closePic = new MySprite();
closePic.init(this.images.get('close'));
closePic.scaleX = this.scaleX;
closePic.scaleY = this.scaleY;
closePic.x = parent.width - 20 * this.scaleX;
closePic.y = 20 * this.scaleY;
parent.addChild(closePic, 99);
return closePic;
}
setContent(data){
this.shown = false;
if(this.contentSpr){
this.bg.removeChild(this.contentSpr);
}
this.data = data;
let mW = 960 * this.scaleX;
let mH = 560 * this.scaleY;
const pic = new MySprite();
pic.init(this.images.get(this.data.picUrl));
pic.x = this.bg.width / 2;
pic.y = this.bg.height / 2 - 10 * this.scaleY;
let scale = Math.min(mW / pic.width, mH / pic.height);
pic.setScaleXY(scale);
this.contentSpr = pic;
this.bg.addChild(pic, 98);
}
showCard(toX, toY, callback = null){
this.shown = true;
tweenChange(this.bg, {scaleX: 1, scaleY: 1, x : toX, y : toY}, 0.3, callback);
}
hideCard(toX, toY, callback = null){
tweenChange(this.bg, { scaleX: 0, scaleY: 0, x: toX, y: toY }, 0.3, () => {
this.shown = false;
callback && callback();
});
}
}
export class WordBigCard extends BigCard{
picBgArr = [];
wordArr = [];
setContent(data){
this.data = data;
this.shown = false;
let len = this.data.cardWordArr.length;
let width = 900 * this.scaleX;
let maxW = 700 * this.scaleX;
let lineW = 400 * this.scaleX;
let totalW = width;
let dW = 31 * this.scaleX;
if(len == 2){
width = 440 * this.scaleX;
maxW = 360 * this.scaleX;
lineW = 180 * this.scaleX;
totalW = width * 2 + dW;
}
let x = (this.bg.width - totalW ) / 2;
for(let i = 0; i < len ; ++ i){
let cardWord = this.data.cardWordArr[i];
let picBg = this.getView(cardWord, width, maxW, lineW);
picBg.x = x;
picBg.y = (this.bg.height - picBg.height) / 2 - 10 * this.scaleY;
picBg['data'] = cardWord;
this.picBgArr.push(picBg);
x += width + dW;
this.bg.addChild(picBg);
}
}
private getView(cardWord, width, maxW, lineW){
let height = 514 * this.scaleY;
const picBg = new ShapeRect();
picBg.setSize(width, height);
picBg.fillColor = "#f7effc";
let maxH = 300 * this.scaleY;
const pic = new MySprite();
pic.init(this.images.get(cardWord.picUrl));
let scale = Math.min(maxW / pic.width, maxH / pic.height);
pic.setScaleXY(scale);
picBg.addChild(pic);
pic.x = width / 2;
if (cardWord.letterArr && cardWord.letterArr.length > 0) {
pic.y = (height - 140 * this.scaleY) / 2 ;
const line = new ShapeRect();
line.setSize(lineW, 7 * this.scaleY);
line.fillColor = "#949494";
line.x = (width - line.width) / 2;
line.y = height - line.height - 42 * this.scaleY;
picBg.addChild(line);
picBg['line'] = line;
let text2 = this.getTextView(cardWord.letterArr);
text2.y = height / 2 - 195 * this.scaleY + 325 * this.scaleY + text2.getBoundingBox().height / 2;
text2.x = (width - text2.getBoundingBox().width) / 2;
text2.alpha = 0;
let text = this.getTextView2(cardWord.letterArr, text2.scaleX);
text.x = text2.x;
text.y = height / 2 - 195 * this.scaleY + 325 * this.scaleY;
text.alpha = 0;
picBg.addChild(text);
picBg.addChild(text2);
picBg['text'] = text;
picBg['text2'] = text2;
}
else {
pic.y = height / 2;
}
return picBg;
}
getTextView(letterArr) {
const getLabelText = (letter) => {
const text = new LabelText();
text.val = letter.val;
text.fontColor = letter.fontColor;
text.underLine = false;
return text;
}
let labelTextArr = [];
for (let i = 0; i < letterArr.length; ++i) {
var letter = letterArr[i];
let label = getLabelText(letter);
labelTextArr.push(label);
}
const answer = new Label2();
answer.textArr = labelTextArr;
answer.fontSize = 88;
answer.fontName = "MMB";
answer.setScaleXY(this.scaleX);
answer.refreshSize();
answer.setMaxSize(360 * this.scaleX);
return answer;
}
getTextView2(letterArr, scale) {
let getLabel = (letter, fontColor) => {
const label = new Label();
label.text = letter;
label.textAlign = 'center';
label.fontSize = 88;
label.fontName = "MMB";
label.fontColor = fontColor;
label.setScaleXY(scale);
label.refreshSize();
label.y = label.getBoundingBox().height / 2;
return label;
}
const bg = new ShapeRect();
let h = 0;
let w = 0;
let x = 0;
let tmpArr = [];
for (let i = 0; i < letterArr.length; ++i) {
let letter = letterArr[i];
if (!letter) {
continue;
}
let fontColor = letter.fontColor;
for (let j = 0; j < letter.val.length; ++j) {
let label = getLabel(letter.val.charAt(j), fontColor);
bg.addChild(label);
tmpArr.push(label);
}
}
for (let i = 0; i < tmpArr.length; ++i) {
let label = tmpArr[i];
label.x = x;
let tW = Math.ceil(label.getBoundingBox().width);
x += tW;
h = label.getBoundingBox().height;
w += tW;
}
bg.alpha = 0;
bg.visible = false;
bg.setSize(w, h);
return bg;
}
}
\ No newline at end of file
import { BigCard, WordBigCard } from "./BigCard";
import { jelly, Label2, LabelText, MySprite, ShapeRect, ShapeRectNew, tweenChange } from "./Unit";
export class Exercises {
images;
data;
scaleX = 1;
scaleY = 1;
width = 458;
height = 289;
bg;
wordArr = []
wordBgArr = []
pic;
bigCard : BigCard;
wordBigCardArr = [];
constructor(data, images) {
this.data = data;
this.images = images;
}
init(scaleX = 1, scaleY = 1) {
this.scaleX = scaleX;
this.scaleY = scaleY;
this.width *= this.scaleX;
this.height *= this.scaleY;
this.initBg();
this.initPic();
this.initBigCard();
this.initWord();
this.initCardWord();
}
private initBg() {
const bg = new ShapeRect();
bg.setSize(this.width, this.height);
bg.fillColor = "#ffffff";
bg.setShadow(0, 2, 4, 'rgba(0, 0, 0, 0.5)');
this.bg = bg;
}
private initPic() {
let maxW = 458 * this.scaleX;
let maxH = 246 * this.scaleY;
const pic = new MySprite();
pic.init(this.images.get(this.data.picUrl));
pic.x = this.width / 2;
pic.y = maxH / 2;
this.bg.addChild(pic);
let scale = Math.min(maxW / pic.width, maxH / pic.height);
pic.setScaleXY(scale);
this.pic = pic;
}
private initWord() {
let wordArr = this.data.wordArr;
let len = wordArr.length;
let h = 42 * this.scaleY;
let w = this.width;
if (len == 2) {
w = 229 * this.scaleX;
}
let x = 0;
for (let i = 0; i < len; ++i) {
const wordBg = new ShapeRect();
wordBg.setSize(w, h);
let flag = "";
if (i == 0) {
wordBg.fillColor = "#ecd1fa";
flag = 'l';
}
else {
wordBg.fillColor = "#f5dc6f";
flag = 'r';
}
wordBg.y = this.bg.height - h;
wordBg.x = x;
x += (i + 1) * w;
this.bg.addChild(wordBg);
this.wordBgArr.push(wordBg);
this.getWord(wordBg, wordArr[i], flag);
}
}
private getWord(parent, val, flag) {
let text = new Label2();
text.fontName = "GOTHICB";
let fontSize = 30;
text.fontSize = fontSize;
let textArr = new Array<LabelText>();
text.textArr = textArr;
for (let i = 0; i < val.letterArr.length; ++i) {
var letter = val.letterArr[i];
let labelText = new LabelText();
labelText.val = letter.val;
labelText.fontColor = letter.fontColor;
textArr.push(labelText);
}
text.scaleX = this.scaleX;
text.scaleY = this.scaleY;
text.refreshSize();
text.y = parent.height / 2;
if('l' == flag){
text.x = 14 * this.scaleX;
}
else{
text.x = parent.width - text.getBoundingBox().width - 10 * this.scaleX;
}
parent.addChild(text);
this.wordArr.push(text);
}
private initBigCard(){
var data = {
picUrl : this.data.picUrl2,
audioUrl : this.data.audioUrl
}
const bigCard = new BigCard();
bigCard.init(this.images, this.scaleX, this.scaleY);
this.bigCard = bigCard;
bigCard.setContent(data);
bigCard['type'] = 'picCard';
}
private initCardWord(){
for(let i = 0; i < this.data.wordArr.length; ++ i){
let data = this.data.wordArr[i];
const bigCard = new WordBigCard();
bigCard.init(this.images, this.scaleX, this.scaleY);
this.wordBigCardArr.push(bigCard);
bigCard.setContent(data);
bigCard['type'] = 'wordCard';
}
}
textAnimal(item, callback = null) {
let labelArr = item.text.children;
const animal = (label, index) => {
tweenChange(label, { y: label.y - 12 * this.scaleY }, 0.08, () => {
let i = index + 1;
if (labelArr[i]) {
animal(labelArr[i], i);
}
tweenChange(label, { y: label.y + 16 * this.scaleY }, 0.08, () => {
tweenChange(label, { y: label.y - 4 * this.scaleY }, 0.04, () => {
if (callback) {
callback();
if (index == labelArr.length - 1) {
item.text2.alpha = 1;
item.text.visible = false;
jelly(item.text2, 0.7)
}
}
});
});
});
}
item.text2.alpha = 0;
item.text.visible = true;
animal(labelArr[0], 0);
}
}
\ No newline at end of file
import { Label, ShapeCircle, ShapeRect, ShapeRectNew } from "./Unit";
export class Letter{
data;
images;
bgColor;
lineColor;
scaleX = 1;
scaleY = 1;
bg : ShapeRectNew;
dW;
canDrag = true;
init(images, data, bgColor, scaleX = 1, scaleY = 1) {
this.images = images;
this.data = data;
this.bgColor = bgColor;
this.scaleX = scaleX;
this.scaleY = scaleY;
this.initBg();
let letter = this.initView();
let w = 20 * this.scaleX + letter.getBoundingBox().width;
let h = 59 * this.scaleY;
this.bg.setSize(w, h, 0);
letter.x = w / 2;
letter.y = h / 2;
}
initBg(){
let bg = new ShapeRectNew();
bg.fillColor = this.bgColor;
this.bg = bg;
}
initView(){
const letter = new Label();
letter.text = this.data.val;
letter.textAlign = 'center';
letter.fontSize = 36;
letter.fontName = "GOTHICB";
letter.fontColor = "#facf46";
letter.setScaleXY(this.scaleX);
letter.refreshSize();
this.bg.addChild(letter);
return letter;
}
}
\ No newline at end of file
import {
Label,
MySprite, ShapeRectNew,
ShapeCircle,
tweenChange,
ShapeRect
} from './Unit';
import {
playAudio,
pauseAudio
} from './AudioUtil';
export class Listening {
audio;
images;
bg;
btnPlay;
btnStop;
playing = false;
constructor(audio, images) {
this.audio = audio;
this.images = images;
}
init(scaleX = 1, scaleY = 1) {
const bg = new ShapeRect();
const btnPlay = new MySprite();
btnPlay.init(this.images.get('play'));
btnPlay.scaleX = scaleX;
btnPlay.scaleY = scaleY;
btnPlay.x = btnPlay.getBoundingBox().width / 2
btnPlay.y = btnPlay.getBoundingBox().height / 2
this.btnPlay = btnPlay;
bg.addChild(btnPlay);
const btnStop = new MySprite();
btnStop.init(this.images.get('stop'));
btnStop.x = btnPlay.x;
btnStop.y = btnPlay.y;
btnStop.alpha = 0;
btnStop.scaleX = scaleX;
btnStop.scaleY = scaleY;
this.btnStop = btnStop;
bg.addChild(btnStop);
bg.setSize(btnPlay.getBoundingBox().width, btnPlay.getBoundingBox().height);
bg.alpha = 0;
this.bg = bg;
}
play(callback = null){
console.log('playing:', this.playing);
if(!this.playing){
this.playAudio(callback);
return this.audio;
}
else{
this.pauseAudio(callback);
}
return null;
}
reset(){
this.btnPlay.alpha = 1;
this.btnStop.alpha = 0;
this.playing = false;
}
playAudio(callback = null){
this.btnPlay.alpha = 0;
this.btnStop.alpha = 1;
playAudio(this.audio, false, callback);
this.playing = true;
return this.audio;
}
pauseAudio(callback){
this.btnPlay.alpha = 1;
this.btnStop.alpha = 0;
this.playing = false;
pauseAudio(this.audio, false, callback)
}
}
\ No newline at end of file
import {
Label,
MySprite, ShapeRect,
} from './Unit';
import {
playAudio,
pauseAudio
} from './AudioUtil';
export class Title {
titleBg: ShapeRect;
audio;
images;
titleData;
constructor(titleData, images) {
this.titleData = titleData;
this.images = images;
}
init(mapScaleX = 1, mapScaleY = 1) {
let titleBg = new ShapeRect();
//初始化标题1背景
const titePart1Bg = new ShapeRect();
titePart1Bg.fillColor="#763c92";
let pWidth = 117 * mapScaleX;
let pHeight = 65 * mapScaleY;
titePart1Bg.setSize(pWidth, pHeight);
titePart1Bg.setShadow(4,4,0, 'rgba(0, 0, 0, 0.2)');
titePart1Bg.x = 0;
titleBg.addChild(titePart1Bg);
//标题1内容
const part1 = new Label();
part1.text = this.titleData.part1;
part1.textAlign = 'left';
part1.fontSize = 48;
part1.fontName = "BRLNSDB";
part1.fontColor = "#facf46";
part1.setScaleXY(mapScaleX);
part1.refreshSize();
part1.x = pWidth - part1.getBoundingBox().width - 13 * mapScaleX;
part1.y = 5 * mapScaleY + part1.getBoundingBox().height / 2;
titleBg.addChild(part1);
//标题2内容
const part2 = new Label();
part2.text = this.titleData.part2;
part2.fontSize = 36;
part2.fontName = "FUTURA";
part2.fontColor = "#000000";
part2.setScaleXY(mapScaleX);
part2.refreshSize();
part2.x = titePart1Bg.getBoundingBox().width + 11 * mapScaleX;
part2.y = 16 * mapScaleY + part2.getBoundingBox().height / 2;
let height = Math.max(titePart1Bg.getBoundingBox().height, part2.getBoundingBox().height);
let width = titePart1Bg.getBoundingBox().width + part2.getBoundingBox().width + 11 * mapScaleX;
titePart1Bg.y = (height - pHeight)/2;
titleBg.setSize(width, height);
titleBg.alpha = 0;
titleBg.addChild(part2);
this.titleBg = titleBg;
}
getTitleBg(){
return this.titleBg;
}
setAudio(audio){
this.audio = audio;
}
playAudio(callback = null){
playAudio(this.audio, true, callback);
return this.audio;
}
pasueAudio(callback){
pauseAudio(this.audio, true, callback)
}
}
\ No newline at end of file
......@@ -709,6 +709,265 @@ export class Label extends MySprite {
}
export class LabelText {
private _val: string;
private _fontColor = "#000000";
private _underLine: boolean = false;
private _visiable = true;
private _fill = false;
private _width = 0;
private _x = 0;
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;
}
set visiable(visiable){
this._visiable = visiable;
}
get visiable(){
return this._visiable;
}
set fill(file){
this._fill = file;
}
get fill(){
return this._fill;
}
set width(width){
this._width = width;
}
get width(){
return this._width;
}
set x(val){
this._x = val;
}
get x(){
return this._x;
}
}
export class Label2 extends MySprite {
textArr: Array<LabelText> = [];
fontName = 'Verdana';
textAlign = 'left';
fontSize = 40;
fontColor = '#000000';
fontWeight = 900;
_maxWidth;
outline = 0;
outlineColor = '#ffffff';
_outlineFlag = false;
_outLineWidth;
_outLineColor;
underLineWidth: number;
underLineColor = "#000000";
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 = "";
let count = 0;
for (let i = 0; i < this.textArr.length; ++i) {
if(this.textArr[i].underLine){
count ++;
continue;
}
text += this.textArr[i].val;
}
if(count > 0){
this._width = this.ctx.measureText(text).width + 36 * count + 4 * (count - 1);
}
else{
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];
let width = this.ctx.measureText(text.val).width;
text.width = width;
text.x = startX;
let tempStartX = startX;
let dW = 0;
if (text.underLine && this.underLineWidth > 0) {
this.ctx.save();
this.ctx.beginPath();
this.ctx.lineWidth = this.underLineWidth;
this.ctx.strokeStyle = this.underLineColor;
let lineY = this.fontSize / 2;
this.ctx.moveTo(tempStartX, lineY);
this.ctx.lineTo(tempStartX + 36, lineY);
this.ctx.stroke();
this.ctx.restore();
tempStartX += (36 - width) / 2;
dW = 36 ;
if(this.textArr[i + 1] && this.textArr[i + 1].underLine){
dW += 4 ;
}
}
else{
dW = width;
}
if (this._outlineFlag) {
this.ctx.lineWidth = this._outLineWidth;
this.ctx.strokeStyle = this._outLineColor;
this.ctx.strokeText(text.val, tempStartX, 0);
}
if (this.outline > 0) {
this.ctx.lineWidth = this.outline;
this.ctx.strokeStyle = this.outlineColor;
this.ctx.strokeText(text.val, tempStartX, 0);
}
this.ctx.fillStyle = text.fontColor ? text.fontColor : this.fontColor;
if(text.visiable){
this.ctx.fillText(text.val, tempStartX, 0);
}
startX += dW;
}
}
drawSelf() {
super.drawSelf();
this.drawText();
}
}
export class RichTextOld extends Label {
textArr = [];
......
This diff is collapsed.
......@@ -17,3 +17,20 @@
src: url("../../assets/font/BRLNSDB.TTF") ;
}
@font-face
{
font-family: 'GOTHIC';
src: url("../../assets/font/GOTHIC.TTF") ;
}
@font-face
{
font-family: 'GOTHICB';
src: url("../../assets/font/GOTHICB.TTF") ;
}
@font-face
{
font-family: 'MMB';
src: url("../../assets/font/MMTextBook-Bold.otf") ;
}
\ No newline at end of file
This diff is collapsed.
const res = [
// ['bg', "assets/play/bg.jpg"],
['btn_left', "assets/play/btn_left.png"],
['btn_right', "assets/play/btn_right.png"],
// ['text_bg', "assets/play/text_bg.png"],
['play', "assets/play/play.png"],
['stop', "assets/play/stop.png"],
['close', "assets/play/close.png"],
['card', "assets/play/card.png"],
];
......@@ -12,7 +11,9 @@ const res = [
const resAudio = [
['click', "assets/play/music/click.mp3"],
['open', "assets/play/music/open.mp3"],
['back', "assets/play/music/back.mp3"],
['close', "assets/play/music/close.mp3"],
];
export {res, resAudio};
This diff is collapsed.
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