Commit 858b617c authored by Li MingZhe's avatar Li MingZhe

feat: 字少变大 更换背景

parent 1e7df9e2
......@@ -26,7 +26,7 @@
<div col-sm [style.width]="_WIDTH" class="item-box"
*ngFor="let item of result[1]; let i = index">
<div class="item">
<div *ngIf="item.showText" class="display-item">{{item.text}}</div>
<div *ngIf="item.showText" class="display-item" [style]="item.isBigFont ? 'fontSize: 4vh' : ''">{{item.text}}</div>
<div *ngIf="item.showPic" class="display-item">
<img [src]="item.pic_id" alt="">
</div>
......@@ -42,7 +42,7 @@
<div col-sm [style.width]="_WIDTH" class="item-box"
*ngFor="let item of options; let i = index">
<div class="item" (click)="selectItem(item, $event)">
<div *ngIf="item.showText" class="display-item">{{item.text}}</div>
<div *ngIf="item.showText" class="display-item" [style]="item.isBigFont ? 'fontSize: 4.5vh' : ''">{{item.text}}</div>
<div *ngIf="item.showPic" class="display-item">
<img [src]="item.pic_id" alt="">
</div>
......
import { Component, ElementRef,ApplicationRef,ChangeDetectorRef, ViewChild, OnInit, Input, OnDestroy, HostListener, OnChanges, AfterViewInit } from '@angular/core';
import { Component, ElementRef, ApplicationRef, ChangeDetectorRef, ViewChild, OnInit, Input, OnDestroy, HostListener, OnChanges, AfterViewInit } from '@angular/core';
import * as _ from 'lodash';
......@@ -19,6 +19,8 @@ export class PlayComponent implements OnInit {
@ViewChild('itemsContainer')
itemsContainer: ElementRef;
CURRENT_ITEM = null;
CURRENT_ITEM_EL = null;
CURRENT_ITEM_GROUP = -1;
......@@ -34,39 +36,47 @@ export class PlayComponent implements OnInit {
this.rightAudio.load();
this.wrongAudio.src = 'assets/wrong.mp3';
this.wrongAudio.load();
const w = this.textSize(50, 'aaaa aaaa');
}
ngOnInit() {
this.data = {
contentObj: {
groups: [
{name: 'aaaa', options: [
{showText: true, text: "11111"},
{showText: true, text: "22222"}
]},
{name: 'bbbb', options: [
{showPic: true, pic_id: "assets/picture-group/2.png"},
{showPic: true, pic_id: "assets/picture-group/3.png"},
{showPic: true, pic_id: "assets/picture-group/4.png"}
]}
{
name: 'aaaa', options: [
{ showText: true, text: "11111" },
{ showText: true, text: "22222" }
]
},
{
name: 'bbbb', options: [
{ showPic: true, pic_id: "assets/picture-group/2.png" },
{ showPic: true, pic_id: "assets/picture-group/3.png" },
{ showPic: true, pic_id: "assets/picture-group/4.png" }
]
}
]
}
};
// 获取数据
const getData = ( window as any).courseware.getData;
const getData = (window as any).courseware.getData;
getData((data) => {
if (data && typeof data === 'object') {
this.data = data;
}
this.init();
this.addItemTextIsBigFont();
window["air"].hideAirClassLoading(this.saveKey, this.data);
this.refresh();
}, this.saveKey);
}
init(){
init() {
this.result = [[], []];
let item_length = 0;
const groups = _.get(this.data.contentObj, 'groups', []);
......@@ -98,6 +108,21 @@ export class PlayComponent implements OnInit {
this._WIDTH = item_length > 4 ? '20%' : '25%';
}
addItemTextIsBigFont() {
const arr = this.data.contentObj.groups;
for ( let i=0; i<arr.length; i++) {
if (arr[i].options) {
arr[i].options.forEach(item => {
if (item.showText) {
item.isBigFont = this.checkIsBigFont(item.text);
}
});
}
}
console.log('this.data: ', this.data);
}
selectItem(item, evt) {
const el = evt.currentTarget.parentNode;
......@@ -183,4 +208,36 @@ export class PlayComponent implements OnInit {
}
checkIsBigFont(text) {
text = text.replace(/(^\s*)|(\s*$)/g, "");
const index = text.search(/\s/);
if (index != -1) {
return false;
}
const size = this.textSize(50, text);
console.log(`text is: ${text}, size is: ${size.width}`)
return size.width < 54;
}
textSize(fontSize,text) {
var span = document.createElement("span");
var result = {width: 0, height: 0};
result.width = span.offsetWidth;
result.height = span.offsetWidth;
span.style.visibility = "hidden";
span.style.fontFamily = "ChalkboardSE-Regular";
span.style.fontSize = fontSize;
document.body.appendChild(span);
if (typeof span.textContent != "undefined")
span.textContent = text;
else span.innerText = text;
result.width = span.offsetWidth - result.width;
result.height = span.offsetHeight - result.height;
span.parentNode.removeChild(span);
return result;
}
}
src/assets/player-bg.png

47.2 KB | W: | H:

src/assets/player-bg.png

45 KB | W: | H:

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