Ionic으로 계산기를 작성했으므로 되돌아 보는(Component편)의 계속입니다.
이번에는 Directive를 사용한 문자 크기의 자동 조정 부분입니다.
주로 다음 내용에 대해 씁니다.

· 변경 감지
・문자 사이즈의 변경(수수께끼의 계산식)

만든 Directive 설명

글꼴 크기를 자동으로 조정하는 Directive를 만들었습니다. 이름은 flowtype이라고합니다. 소스 코드는 이하.
htps : // 기주 b. 이 m/scrpⅠ/x나lぁ과 r/bぉb/마s r/src/ぢれcゔぇs/fぉwtyぺ/fぉwtyぺ. ts

매우 수수한 변화입니다만, 입력된 문자수에 따라 폰트 사이즈를 자동 조정하고 있습니다. 그냥 아래 이미지 같은 느낌입니다.




※ 약간 위의 화상보다 폰트 사이즈가 작다

사용법

flowtype 지시어는 Input으로서 이하의 2개를 가지고 있습니다.

・flowtype
입력되는 문자열입니다.

・size
글꼴의 기본 크기입니다.

대체로 HTML로 기술하면 이런 느낌입니다.

<div flowtype="あいうえお" size=7></div>

변경 감지

Angular 표준 OnChanges를 사용하고 있습니다.
코드로 쓰면 다음과 같은 느낌.

import { OnChanges, Directive, ElementRef, Input } from '@angular/core';

@Directive({
    selector: '[flowtype]' // Attribute selector
})
export class FlowtypeDirective implements OnChanges {
   @Input('flowtype') flowtype: any;
   @Input() size: number;

   /** 略 **/
   ngOnChanges(changes:any) {
        /** 略 **/
   }
}

FlowtypeDirective는 가져온 OnChanges 모듈을 상속합니다. OnChanges 모듈을 상속하여 ngOnChanges() 메서드를 호출할 수 있습니다.
이번이라면, 문자수로서 인풋 되고 있는 flowtype 변수가 변경될 때마다 ngOnChanges() 메소드가 불려 가므로, 이중에서 폰트 사이즈 변경의 처리를 기술하고 있습니다.

문자 크기 변경(수수께끼 계산식)

이하가 문자 사이즈의 변경 처리가 됩니다. 본 지시어의 주목적이군요.

changeFontSize(){
    var fontSize = this.size;
    var len = this.flowtype.length - 1;
    var newSize = (100 / len) * 1.7;
    if(this.size > newSize){
        fontSize = newSize;
    }
    this.el.nativeElement.style.fontSize = fontSize + "vw";
    this.el.nativeElement.innerHTML = this.flowtype;
}

이야기로서는 엄청 간단하고 이하의 계산식으로 폰트 사이즈(vw)를 구해, 그것이, 디폴트 사이즈보다 작은 값이면, 폰트 사이즈로서 설정한다고 하는 처리가 되어 있습니다.

· 글꼴 크기 (vw) = 100/문자 길이

vw는 뷰포트의 몇 분 중 하나입니까? 라는 지정이 가능한 단위입니다.

이 수식은 수수께끼 수치의 1.7을 곱합니다. 이 녀석이 무언가라고 말하면, 누군가 자신이라도 알지 못하고, 일단 없으면 문자가 너무 작아서 더 큰 수치라고 문자가 튀어 나오면 간 시말입니다.
아마도 세 글자마다 끼어있는 쉼표의 영향입니까?
폰트가 등폭 폰트가 아니기 때문에, 콤마의 용으로 가로폭이 작은 문자가 복수 포함되면 폭이 부족해져 버리는 것입니다. 라고 생각합니다.

요약

이번에는 문자열 가변 변경의 Directive 작성을 되돌아 보았습니다.
흔한 것 같은 기능. 게다가 swift라든가라면 프레임워크가 서포트해 주고 그러한 기능입니다만, 막상, 처리를 생각해 실장하면(자) 여러 가지 생각하지 않으면 안 되는 것이 있어 귀찮네요.

이 기사 쓸 때 다시 살펴보니 이미 같은 Directive는 세상에 많이 존재하고 있었습니다. 게다가, 나의 우선 움직이는 것에 비하면 확실히 할 수 있을 것입니다.
언젠가 이 문자 사이즈 변경 Directive도 다른 Directive를 참고로 재작성하려고 합니다.
htps : // 기주 b. 코 m / ぉ 켄 ぉ / 응 g2