Commit c5a90dac authored by liujiaxin's avatar liujiaxin

scale text

parent 85018f98
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { NgModule, ErrorHandler, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import {MyErrorHandler} from './MyError';
......@@ -47,6 +47,10 @@ registerLocaleData(zh);
FontAwesomeModule,
ReactiveFormsModule
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
NO_ERRORS_SCHEMA
],
providers: [
{provide: ErrorHandler, useClass: MyErrorHandler},
{ provide: NZ_I18N, useValue: zh_CN }
......
......@@ -10,38 +10,50 @@ import { TextService } from '../services/text.service';
@Directive({
selector: '[appScaleText]',
providers:[TextService]
providers: [TextService]
})
export class ScaleTextDirective implements AfterViewInit {
@Input()
offsetX = 0;
private Element: any;
private Element: ElementRef;
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;
console.log('this.Element', this.Element.nativeElement.textContent);
let style = '';
style = `display: initial;
text-indent: initial;
box-sizing: initial;
line-height: initial;
text-overflow: initial;
word-spacing: normal;
word-break: keep-all;
white-space: nowrap;
`;
const span = document.createElement('span');
span.innerHTML = `${this.Element.nativeElement.textContent}`;
span.style.cssText = style;
this.Element.nativeElement.childNodes.forEach(n => n.remove());
this.Element.nativeElement.append(span);
setTimeout(() => {
const fitWidth = this.Element.nativeElement.offsetWidth;
const textWidth = span.offsetWidth;
console.log(textWidth, fitWidth);
if (textWidth > fitWidth) {
const scaleTo = fitWidth / textWidth;
const offset = (fitWidth - textWidth) / 2;
span.style.transform = `scale(${scaleTo})`;
span.style.marginLeft = `${offset + this.offsetX}px`;
span.style.display = 'inline-block';
}
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)
}
}
......@@ -27,7 +27,22 @@
<img class="shadow" src="assets/play/blue-shadow.png" alt="">
<div class="option">
<div class="lbl">{{o}}</div>
<div class="q-qo">{{q['questionOption'+o]}}</div>
<div class="q-qo" appScaleText [offsetX]="42">
<!-- <div>-->
<!-- <svg-->
<!-- width="100%"-->
<!-- height="100%"-->
<!-- viewBox="0 0 287 338"-->
<!-- preserveAspectRatio="xMinYMin meet"-->
<!-- >-->
<!-- <foreignObject width="100%" height="100%" xmlns="http://www.w3.org/1999/xhtml">-->
<!-- {{q['questionOption'+o]}}-->
<!-- </foreignObject>-->
<!-- </svg>-->
<!-- </div>-->
{{q['questionOption'+o]}}
<!-- <span>{{q['questionOption'+o]}}</span>-->
</div>
</div>
</div>
</ng-container>
......
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