Commit eb69f17c authored by liujiaxin's avatar liujiaxin

jm 12

parent 511e8287
......@@ -21,6 +21,7 @@ import { far } from '@fortawesome/free-regular-svg-icons';
import { ContentsPipe } from './pipes/contents.pipe';
// import { TouchStrategy } from './play/touch-strategy';
import { CustomScrollBarDirective } from './play/scrollbar.directive';
import { ScaleTextDirective } from './directives/scale-text.directive';
registerLocaleData(zh);
......@@ -34,6 +35,7 @@ registerLocaleData(zh);
ContentsPipe,
TimePipe,
CustomScrollBarDirective,
ScaleTextDirective,
],
imports: [
......
import { AfterContentInit, AfterViewInit, Directive, ElementRef, Input, OnInit } from '@angular/core';
import { TextService } from '../services/text.service';
/**
* yarn add better-scroll
*/
@Directive({
selector: '[appScaleText]',
providers:[TextService]
})
export class ScaleTextDirective implements AfterViewInit {
@Input()
offsetX = 0;
private Element: any;
private textService: TextService;
constructor(textService: TextService, Element: ElementRef) {
this.Element = Element;
this.textService = textService;
// console.log('textService', textService);
}
ngAfterViewInit() {
console.log(11111);
const txt = this.Element.nativeElement.textContent;
if (!txt.trim()) {
return;
}
const s = window.getComputedStyle(this.Element.nativeElement) ;
const w = this.textService.textWidth(txt, {
style: s.fontStyle,
variant: s.fontVariant,
weight: s.fontWeight,
size: s.fontSize,
family: s.fontFamily,
align: s.textAlign,
baseline: 'alphabetic'
});
console.log(w)
}
}
......@@ -65,7 +65,7 @@
.lesson-text{font-family: ASans; font-size: 22px;}
.questions{
flex: 0 auto;
height: 280px;
height: 320px;
margin-bottom: 48px;
}
:host ::ng-deep .question-card-box{
......@@ -162,6 +162,7 @@
overflow: hidden;
display: flex;
flex-direction: column;
padding-bottom: 36px;
}
.body-board-container{
width: 100%;
......@@ -303,6 +304,7 @@
font-size: 22px;
line-height: 35px;
font-family: 'ABLACK';
position: relative;
}
.q-answer.r{
background: #007b3e;
......@@ -411,6 +413,9 @@
font-weight: 400;
flex: 1 auto;
font-family: 'ASans';
word-break: break-all;
height: 100px;
overflow: hidden;
}
.question-answer{
height: 140px;
......@@ -430,17 +435,23 @@
position: relative;
}
.btn-box .option{
background-image: url(../../assets/play/opt-bg.png);
background-repeat: no-repeat;
background-size: contain;
/*background-image: url(../../assets/play/opt-bg.png);*/
/*background-repeat: no-repeat;*/
/*background-size: contain;*/
width: 100%;
height: 56px;
line-height: 44px;
font-size: 18px;
font-size: 16px;
color: #fff;
text-align: center;
z-index: 1;
position: relative;
border: 6px solid #0079a6;
border-radius: 18px;
background: #008cb9;
height: 50px;
margin-bottom: 6px;
line-height: 38px;
}
.btn-box .option .lbl{
background-image: url(../../assets/play/rectangle-56@3x.png);
......@@ -457,9 +468,19 @@
color: #82d7ff;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
.btn-box.selected .option{
background-image: url(../../assets/play/opt-bg-sel.png);
/*background-image: url(../../assets/play/opt-bg-sel.png);*/
background: rgba(129, 194, 224, 1.0);
/*background: -webkit-radial-gradient(center, rgba(129, 194, 224, 1.0), rgba(0, 140, 185, 1.0));*/
/*background: -moz-radial-gradient(center, rgba(129, 194, 224, 1.0), rgba(0, 140, 185, 1.0));*/
background: radial-gradient(ellipse at center, rgba(129, 194, 224, 1), rgba(0, 140, 185, 1));
background-size: 100% 800%;
background-position: center;
top: 8px;
}
......@@ -477,7 +498,7 @@
height: 104px;
z-index: 0;
position: absolute;
height: 72px;
height: 82px;
z-index: 0;
left: 50%;
transform: translateX(-50%);
......@@ -559,12 +580,15 @@
.analysis{
position: relative;
width: 100%;
margin-bottom: 32px;
}
img.c-icon {right: 0px; top: 4px; position: absolute; width: 36px;}
.analysis-content{
background: #54c348;
margin: 8px;
padding: 12px;
padding: 24px;
color: #fff;
text-align: center;
}
.analysis:before{
content: '';
......@@ -584,3 +608,10 @@
right: 0;
bottom: 0;
}
.q-qo{
overflow: hidden;
width: 100%;
height: 100%;
text-indent: -42px;
padding-left: 42px;
}
......@@ -27,7 +27,7 @@
<img class="shadow" src="assets/play/blue-shadow.png" alt="">
<div class="option">
<div class="lbl">{{o}}</div>
<span>{{q['questionOption'+o]}}</span>
<div class="q-qo">{{q['questionOption'+o]}}</div>
</div>
</div>
</ng-container>
......@@ -66,12 +66,14 @@
<div class="q-info">
<div class="q-title">{{i + 1}}. {{q.questionTitle}}</div>
<div class="q-answer" [ngClass]="q.questionAnswer == userAnswers[i] ? 'r' : 'w'">
{{q.questionAnswer}}
<span>{{userAnswers[i]}} .</span>
<span style="margin-left: 16px;" *ngIf="q.questionAnswer != userAnswers[i]">{{q['questionOption'+userAnswers[i]]}}</span>
<img *ngIf="q.questionAnswer == userAnswers[i]" class="c-icon" src="assets/play/icon-correct.png" alt="">
</div>
</div>
<div class="q-explain">
<img class="explain-bubble" src="assets/play/explain-bubble.png" alt="">
<div>{{q.questionAnswer}}. {{q['questionOption'+q.questionAnswer]}}</div>
{{q.questionExplain}}
</div>
</div>
......
......@@ -14,6 +14,7 @@ import TWEEN from '@tweenjs/tween.js';
import { NzCarouselComponent } from 'ng-zorro-antd';
import Splide from '@splidejs/splide';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { TextService } from '../services/text.service';
interface QuestionType {
questionAnswer: number;
......@@ -75,7 +76,7 @@ export class PlayComponent implements OnInit, OnDestroy {
splide: Splide;
private AudioEffect: { [key: string]: HTMLAudioElement };
private ss: (el) => void;
constructor() {
constructor(private textService: TextService) {
window.addEventListener('message', (e) => {
const msgData = e.data;
......@@ -157,8 +158,35 @@ export class PlayComponent implements OnInit, OnDestroy {
left : '11%',
},
// fixedWidth: '80%',
} ).mount();
});
this.splide.on('ready', (e) => {
return
const qos = document.querySelectorAll('.q-qo');
console.log(qos);
qos.forEach((qo: HTMLElement) => {
const txt = qo.textContent;
if (!txt.trim()) {
return;
}
const s = window.getComputedStyle(qo) ;
const w = this.textService.textImage(txt, {
style: s.fontStyle,
variant: s.fontVariant,
color: s.color,
weight: s.fontWeight,
size: parseInt(s.fontSize, 10) ,
family: s.fontFamily,
align: s.textAlign,
baseline: 'alphabetic'
});
console.log(qo.offsetWidth, w);
const img = document.createElement('img');
img.src = w;
qo.replaceWith(img);
});
window['air'].hideAirClassLoading(this.saveKey, this.data);
});
this.splide.on( 'click', (e) => {
if (this.splide.index === e.index) {
......@@ -168,7 +196,7 @@ export class PlayComponent implements OnInit, OnDestroy {
console.log('click', e);
this.splide.go(`>${e.index}`);
});
window['air'].hideAirClassLoading(this.saveKey, this.data);
this.splide.mount();
......
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class TextService {
private canvas: any;
private context: any;
constructor() {
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
this.context.textBaseline = 'baseline';
this.context.fillStyle = 'rgba(0, 0, 0, 1)';
}
textWidth(text, options) {
this.context.restore();
this.context.save();
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
options = Object.assign({
style: 'normal',
variant: 'normal',
weight: 'normal',
size: 'medium',
family: 'sans-serif',
align: 'start',
baseline: 'alphabetic'
}, options);
let size = options.size;
if (typeof size === 'number') {
size = size + 'px';
}
this.context.font = `${options.style} ${options.variant} ${options.weight} ${size} ${options.family}`;
this.context.textAlign = options.align;
this.context.textBaseline = options.baseline;
return this.context.measureText(text).width;
}
textImage(text, options) {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
options = Object.assign({
style: 'normal',
variant: 'normal',
weight: 'normal',
size: 'medium',
color: '#000',
family: 'sans-serif',
align: 'start',
baseline: 'alphabetic'
}, options);
let size = options.size;
if (typeof size === 'number') {
size = (size) + 'px';
}
this.context.fillStyle = options.color;
this.context.font = `${options.style} ${options.variant} ${options.weight} ${size} ${options.family}`;
this.context.textAlign = options.align;
this.context.textBaseline = options.baseline;
const width = this.context.measureText(text).width;
this.context.canvas.width = width;
this.context.fillStyle = options.color;
this.context.font = `${options.style} ${options.variant} ${options.weight} ${size} ${options.family}`;
this.context.textAlign = options.align;
this.context.textBaseline = options.baseline;
// this.context.fillText(text, 0 , 0);
this.context.fillText(text, width / 2, options.size * 2);
// this.context.fillText(text, width, 0);
return this.context.canvas.toDataURL('image/png');
const image = this.context.getImageData(0, 0, width, options.size * 2);
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
// set the temp canvas size == the canvas size
tempCanvas.width = image.width;
tempCanvas.height = image.height;
// put the modified pixels on the temp canvas
tempCtx.putImageData(image, 0, 0);
this.context.restore();
return tempCanvas.toDataURL('image/png');
}
}
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