Commit 9a5a2c48 authored by limingzhe's avatar limingzhe

feat: 结算界面

parent a351942f
......@@ -25,7 +25,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
select: [
{label: '日期', value: 'date'},
{label: '时间', value: 'time'},
{label: '人名', value: 'name'}
{label: '人名', value: 'name'},
{label: '城市', value: 'city'},
{label: '电器', value: 'device'},
{label: '方位', value: 'side'},
{label: '工作', value: 'work'},
{label: '动词', value: 'adj'},
{label: '单词', value: 'word'},
],
label: '比对',
},
......@@ -33,9 +40,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
name: '提交按钮',
rect: true,
isFixed: true
}
},
]
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
}
......
......@@ -586,6 +586,7 @@ export class Label extends MySprite {
// fontSize:String = '40px';
fontName = 'Verdana';
textAlign = 'left';
textBaseline = 'middle';
fontSize = 40;
fontColor = '#000000';
fontWeight = 900;
......@@ -615,7 +616,7 @@ export class Label extends MySprite {
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
this.ctx.textBaseline = this.textBaseline;
this.ctx.fontWeight = this.fontWeight;
this._width = this.ctx.measureText(this.text).width;
......@@ -843,27 +844,41 @@ export class RichText extends Label {
disH = 10;
offW = 10;
row = 1;
private rowCount = 1;
textBaseline = "middle";
constructor(ctx?: any) {
super(ctx);
// this.dataArr = dataArr;
}
getLineNum() {
this.drawSelf();
return this.row;
return this.rowCount;
}
getAreaHeight() {
this.drawSelf();
const tmpTextH = this.row * this.fontSize;
const tmpDisH = (this.row - 1) * this.disH
const tmpTextH = this.rowCount * this.fontSize;
const tmpDisH = (this.rowCount - 1) * this.disH
return tmpTextH + tmpDisH;
}
// addLabelMask(mask) {
// this._labelMaskArr.push(mask);
// this._createLabelOffCtx();
// }
// _createLabelOffCtx() {
// if (!this._labelOffCtx) {
// this._labelOffCanvas = document.createElement('canvas'); // 创建一个新的canvas
// this._labelOffCanvas.width = this.width; // 创建一个正好包裹住一个粒子canvas
// this._labelOffCanvas.height = this.height;
// this._labelOffCtx = this._labelOffCanvas.getContext('2d');
// }
// }
getSubTextRect(subText) {
const tmpLabel = new RichText();
......@@ -899,12 +914,25 @@ export class RichText extends Label {
return;
}
let curCtx = this.ctx;
if (this._offCtx) {
this._offCtx.save();
this._offCtx.clearRect(0, 0, this.width, this.height);
curCtx = this._offCtx;
}
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = this.textBaseline;
this.ctx.fontWeight = this.fontWeight;
this.ctx.fillStyle = this.fontColor;
curCtx.font = `${this.fontSize}px ${this.fontName}`;
curCtx.textAlign = this.textAlign;
curCtx.textBaseline = this.textBaseline;
curCtx.fontWeight = this.fontWeight;
curCtx.fillStyle = this.fontColor;
const selfW = this.width * this.scaleX;
......@@ -912,7 +940,7 @@ export class RichText extends Label {
const chr = this.text.split(' ');
let temp = '';
const row = [];
const rows = [];
const w = selfW - this.offW * 2;
const disH = (this.fontSize + this.disH) * this.scaleY;
......@@ -920,45 +948,61 @@ export class RichText extends Label {
for (const c of chr) {
if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + (c)).width <= w) {
if (curCtx.measureText(temp).width < w && curCtx.measureText(temp + (c)).width <= w) {
temp += ' ' + c;
} else {
row.push(temp);
rows.push(temp);
temp = ' ' + c;
}
}
row.push(temp);
rows.push(temp);
this.row = row.length;
this.rowCount = rows.length;
const x = 0;
const y = 0//-row.length * disH / 2;
// for (let b = 0 ; b < row.length; b++) {
// this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
// }
const y = 0;
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 + 0 ) * disH / this.scaleY ); // 每行字体y坐标间隔20
curCtx.lineWidth = this._outLineWidth;
curCtx.strokeStyle = this._outLineColor;
for (let b = 0 ; b < rows.length; b++) {
curCtx.strokeText(rows[b], x, y + ( b + 0 ) * disH / this.scaleY ); // 每行字体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 + 0 ) * disH / this.scaleY ); // 每行字体y坐标间隔20
for (let b = 0 ; b < rows.length; b++) {
curCtx.fillText(rows[b], x, y + ( b + 0 ) * disH / this.scaleY ); // 每行字体y坐标间隔20
}
if (this._offCtx) {
this._offCtx.globalCompositeOperation = this._maskType;
if (this._maskSprArr && this._maskSprArr.length > 0) {
for (let i=0; i<this._maskSprArr.length; i++) {
this._maskSprArr[i].ctx = this._offCtx;
this._maskSprArr[i].update();
}
// console.log('aaaaa1');
}
this.ctx.drawImage(this._offCanvas, this._offX, this._offY);
this._offCtx.restore();
}
}
drawSelf() {
super.drawSelf();
this.drawText();
}
}
......@@ -2162,7 +2206,7 @@ export class ScrollView extends MySprite {
refreshContentSize() {
const children = this.content.children;
console.log('children: ', children);
// console.log('children: ', children);
let maxW = 0;
let maxH = 0;
......@@ -2171,11 +2215,11 @@ export class ScrollView extends MySprite {
continue;
}
const box = children[i].getBoundingBox();
console.log('box: ', box);
// console.log('box: ', box);
const boxEdgeX = box.x + box.width;
const boxEdgeY = box.y + box.height;
console.log('boxEdgeY: ', boxEdgeY);
// console.log('boxEdgeY: ', boxEdgeY);
if (boxEdgeX > maxW) {
maxW = boxEdgeX;
}
......@@ -2184,8 +2228,8 @@ export class ScrollView extends MySprite {
}
}
console.log('maxW: ', maxW);
console.log('maxH: ', maxH);
// console.log('maxW: ', maxW);
// console.log('maxH: ', maxH);
this.content.width = maxW;
this.content.height = maxH ;
......
import { data } from "./words";
export function checkAnswer(type, string, word) {
switch (type) {
case 'device':
case 'side':
case 'work':
case 'adj':
return WordData.getInstance().check(type, string);
case 'name':
case 'city':
return checkCity(string);
case 'time':
return checkTime(string);
case 'date':
return checkDate(string);
case 'word':
return checkWord(string, word);
default:
throw "错误的格式";
}
}
function checkCity(string) {
const bigCase = ('ABCDEFGHIJKLMNOPQRSTUVWXYZ').split('');
const smallCase = ('abcdefghijklmnopqrstuvwxyz').split('');
const right = string.split(' ')
.filter(word => word != '')
.every(word => {
return word.split('')
.every((letter, idx) => {
if (idx == 0) {
return bigCase.includes(letter)
&& !smallCase.includes(letter);
} else {
return !bigCase.includes(letter)
&& smallCase.includes(letter);
}
});
});
return {
right: right,
info: '',
}
}
function checkTime(string) {
const rightResult = {
right: true,
info: '',
}
const wrongResult = {
right: false,
info: 'time格式填写错误。正确格式为“时 分”, 例如:ten thirty',
};
if (string.includes(":")) {
const words = string.split(":");
if (words.length != 2) {
return wrongResult;
}
if (words.some(word => word.length > 2)) {
return wrongResult;
}
const hour = parseInt(words[0]);
const minute = parseInt(words[1]);
if (hour < 0 || 12 < hour) {
return wrongResult;
}
if (minute < 0 || 59 < minute) {
return wrongResult;
}
return rightResult;
}
const hours = [
"one", "two", "three", "four", "five", "six",
"seven", "eight", "nine", "ten", "eleven", "twelve"
];
const minutes = [
"o'clock", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten",
"eleven", "twelve", "thirteen", "fourteen", "fifteen", "a quarter", "sixteen", "seventeen", "eighteen", "nineteen", "twenty",
"twenty-one", "twenty-two", "twenty-three", "twenty-four", "twenty-five", "twenty-six", "twenty-seven", "twenty-eight", "twenty-nine", "thirty", "half",
"thirty-one", "thirty-two", "thirty-three", "thirty-four", "thirty-five", "thirty-six", "thirty-seven", "thirty-eight", "thirty-nine", "forty",
"forty-one", "forty-two", "forty-three", "forty-four", "forty-five", "three quarter", "forty-six", "forty-seven", "forty-eight", "forty-nine", "fifty",
"fifty-one", "fifty-two", "fifty-three", "fifty-four", "fifty-five", "fifty-six", "fifty-seven", "fifty-eight", "fifty-nine",
];
const middles = [
'to',
'past'
];
const middleWord = middles.find(word => string.includes(word));
if (middleWord) {
const strings = string.split(middleWord);
if (minutes.some(word => strings[0].trim().toLowerCase() == word)) {
if (hours.some(word => strings[1].trim().toLowerCase() == word)) {
return rightResult;
}
}
return wrongResult;
}
const strings = string.split(' ');
if (hours.some(word => strings[0].trim().toLowerCase() == word)) {
if (minutes.some(word => strings[1].trim().toLowerCase() == word)) {
return rightResult;
}
}
return wrongResult;
}
function checkDate(string: string) {
const wrongResult = {
right: false,
info: 'date格式填写错误。正确格式为“日 月 年”, 例如:15th August 2008',
};
const rightResult = {
right: true,
info: '',
}
let numberList = [];
if (string.includes('.')) {
numberList = string.split('.').map(string => parseInt(string));
} else {
const days1 = [
'none',
'First', 'second', 'third', 'fourth',
'fifth', 'sixth', 'seventh', 'eighth',
'ninth', 'tenth', 'eleventh', 'twelfth',
'thirteenth', 'fourteenth', 'fifteenth', 'sixteenth',
'seventeenth', 'eighteenth', 'nineteenth', 'Twentieth',
'twenty-first', 'twenty-second', 'Twenty-third', 'twenty-fourth',
'Twenty-fifth', 'Twenty-sixth', 'twenty-seventh', 'Twenty-eighth',
'twenty-ninth', 'Thirtieth', 'Thirty-first'
];
const days2 = [
'none',
'1st', '2nd', '3rd', '4th',
'5th', '6th', '7th', '8th',
'9th', '10th', '11th', '12th',
'13th', '14th', '15th', '16th',
'17th', '18th', '19th', '20th',
'21st', '22nd', '23rd', '24th',
'25th', '26th', '27th', '28th',
'29th', '30th', '31st'
]
const months = [
'none',
'January', 'February', 'March', 'April',
'May', 'June', 'July', 'August',
'September', 'October', 'November', 'December'
];
let yearFlg = false;
let monthFlg = false;
let dayFlg = false;
numberList = string.split(' ').map(string => {
if (!monthFlg) {
const month = months.findIndex(str => str == string);
if (month >= 1) {
monthFlg = true;
return month;
}
}
if (!dayFlg) {
let day = days1.findIndex(str => str == string);
if (day >= 1) {
dayFlg = true;
return day;
}
day = days2.findIndex(str => str == string);
if (day >= 1) {
dayFlg = true;
return day;
}
}
if (!yearFlg) {
const year: number = parseInt(string);
if (!isNaN(year)) {
yearFlg = true;
return year;
}
}
});
}
console.log('numberList = ' + JSON.stringify(numberList));
if (numberList.length < 2 || 3 < numberList.length) {
return wrongResult;
}
if (numberList.some(num => !num)) {
// 有null或者undefind
return wrongResult;
}
if (numberList.some(num => num <= 0)) {
// 负数
return wrongResult;
}
let rightFlg = true;
let yearFlg = false;
let monthFlg = false;
let dayFlg = false;
numberList.forEach((number, idx) => {
if (number > 31) {
if (!yearFlg) {
if (idx == 1) {
rightFlg = false;
} else {
yearFlg = true;
}
} else {
rightFlg = false;
}
} else if (number > 12) {
if (!dayFlg) {
dayFlg = true;
} else {
rightFlg = false;
}
} else {
if (!monthFlg) {
monthFlg = true;
} else if (!dayFlg) {
dayFlg = true;
} else {
rightFlg = false;
}
}
});
if (!monthFlg || !dayFlg) {
rightFlg = false;
}
if (rightFlg) {
return rightResult;
}
return wrongResult;
}
function checkWord(string: string, word: string) {
if (string.trim() != word.trim()) {
return { right: false, info: '' };
}
return { right: true, info: '' };
}
export class WordData {
static _instance = null;
static getInstance(): WordData {
if (!WordData._instance) {
WordData._instance = new WordData();
}
return WordData._instance;
}
constructor() {
this.device = data.device;
this.side = data.side;
this.work = data.work;
this.adj = data.adj;
}
device = ['TV', 'heater'];
side = ['north'];
work = ['teacher', 'worker'];
adj = ['big', 'small'];
check(type: any, string: any) {
const wrongString = {
device: '电器名错误。',
side: '方向名词错误。',
work: '工作名错误。',
adj: '形容词错误。',
}
return {
right: this[type].includes(string.trim()),
info: wrongString[type],
};
}
}
This diff is collapsed.
const res = [
['bg', "assets/play/bg.png"],
['mask', "assets/play/mask.png"],
['shadow', "assets/play/shadow.png"],
['send', "assets/play/send.png"],
['submit', "assets/play/submit.png"],
['bg_item', "assets/play/bg_item.png"],
['btn', "assets/play/btn.png"],
['btn_off', "assets/play/btn_off.png"],
['panel', "assets/play/panel.png"],
['panel_item', "assets/play/panel_item.png"],
['btn_bg', "assets/play/btn_bg.png"],
['submit', "assets/play/submit.png"],
['submit_off', "assets/play/submit_off.png"],
['submit_shadow', "assets/play/submit_shadow.png"],
['check_panel', "assets/play/check_panel.png"],
['check_shadow', "assets/play/check_shadow.png"],
['check_ok', "assets/play/check_ok.png"],
['check_cancel', "assets/play/check_cancel.png"],
['result_bg', "assets/play/result_bg.png"],
['result_bg_item', "assets/play/result_bg_item.png"],
['result_panel', "assets/play/result_panel.png"],
......
This diff is collapsed.
src/assets/play/submit.png

10.9 KB | W: | H:

src/assets/play/submit.png

11.7 KB | W: | H:

src/assets/play/submit.png
src/assets/play/submit.png
src/assets/play/submit.png
src/assets/play/submit.png
  • 2-up
  • Swipe
  • Onion skin
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