Android 텍스트 디 스 플레이 효과 연구

배경 지식:
TTF 글꼴:
True Type Font 는 애플 과 마이크로소프트 가 합작 하여 내 놓 은 문자 파일 형식 으로 하나의 TTF 문 자 는 대량의 다각형 으로 구성 되 어 있 으 며, 각 다각형 은 TTPOLY GONHEADER 라 는 데이터 구조 로 시작 하여 TTPOLY GONHEADER 뒤 를 따 르 는 일련의 TTPOLYCURVE 데이터 구조 체 이다.다각형 의 정점 은 POINTFX 형식의 데이터 구조 점 이다.
글씨 체 는 어떻게 정렬 을 보증 합 니까?원래 라 이브 러 리 내부 에 하나의 기준 선 이 있 는데 마치 편지지 의 점선 처럼 수평 방향 으로 정렬 하 는 것 과 마찬가지 로 수직 방향의 기준 선 도 있다.모든 글 자 는 상승 과 침하 의 높이 가 있 는데 이것 도 이 글자 의 가장 위 와 가장 아래 의 점 이 있 는 위치 이다.
벡터 글 자 는 서로 다른 글자 아래 에서 점진 사이즈 에 따라 표시 되 는 정밀 정도 도 다르다.우 리 는 여기에 '8' 을 확대 해서 작은 글자 와 큰 글자 아래 의 효 과 를 보 았 다.
서로 다른 글자 아래 에서 가장 간단 한 크기 조정 원리 에 따라 모든 점 을 적당 한 위치 로 줄 이 고 곡선 을 확인한다.이때 한 변 이 전체 픽 셀 을 차지 하지 못 하거나 한 변 이 두 열 픽 셀 의 중간 에 눌 려 회색 선 을 만 들 었 다.이것 은 우리 가 원 하 는 효과 가 아니다. 포 토 샵 은 USM 예화 필 터 를 통 해 허 변 을 점차적으로 선명 하 게 하여 원 하 는 벡터 글 자 를 달성 할 수 있다.
애플 시스템 은 전체 점진 의 위 치 를 조정 함으로써 모든 점 을 반 픽 셀 이내 의 위치 로 적당히 옮 겨 비교적 뚜렷 한 글꼴 을 구현 할 수 있다.톱날 을 없 애 는 방식 을 닫 으 면 일부 사 이 드 라인 은 픽 셀 반 을 차지 하지 못 해 표시 되 지 않 아 이른바 결 변 이나 필획 이 형성 된다.
일부 소프트웨어, 예 를 들 어 AdobeAcrobat 은 비교적 복잡 한 알고리즘 을 통 해 벡터 문자 의 선명 함 을 실현 한다.일부 관련 점 을 segment 로 하고 부분 적 으로 인접 한 정수 위치 로 이동 하 며 다른 부분 은 움 직 이지 않 습 니 다.이런 방법 은 현재 비교적 유행 하여 사과 와 ps 보다 더 뚜렷 한 벡터 효 과 를 실현 할 수 있다.
왜 우리 가 흔히 보 는 래크 문자 가 이렇게 선명 합 니까?
마이크로소프트 의 TTF 는 작은 글자 아래 의 선명 함 을 확보 하기 위해 방법 을 다 썼 다 고 할 수 있다.우선, 방대 한 라 이브 러 리 에 여러 글자 의 격자 가 내장 되 어 있 고 그 다음은 벡터 글자 이다.예 를 들 어 송 체 는 12, 14, 16, 18 등 몇 개의 격자 라 이브 러 리 를 내 장 했 는데 그 밖 에 벡터 라 이브 러 리 로 렌 더 링 을 했다.이것 도 하나의 TTF 파일 이 몇 조 내지 몇 십 조 의 용량 을 필요 로 하 는 이유 이다. 그러나 내 장 된 격자 가 많 을 수록 서로 다른 글자 에서 이 루어 지 는 효 과 는 자연히 좋다.이런 격자 들 을 얕 보지 마라. 모든 것 은 평면 디자이너 가 도구 에 그린 것 이지 소프트웨어 로 만들어 진 것 이 아니다.아이고, 불쌍 한 디자이너 여 ~ ~ ~ ~
(ps: android 자체 테이프 라 이브 러 리 는 최대 5M 이 고 벡터 라 이브 러 리 입 니 다).
그런데 특례 가 있어 요.예 를 들 어 아 리 얼 글씨 체 는 내부 가 모두 벡터 글자 이지 만 각종 사이즈 에서 이렇게 뚜렷 하 다.왜 일 까요?
원래 마이크로소프트 는 글꼴 라 이브 러 리 에 해석 프로그램, interpreter, 글꼴 라 이브 러 리 렌 더 링 을 위 한 스 크 립 트 명령 을 추가 했다.서로 다른 글자 아래 에 상응하는 문구 가 있어 벡터 글 자 를 가장 선명 하 게 할 수 있다.이것 은 더욱 복잡 한 기술 이다. 마이크로소프트 도 광범 위 하 게 사용 할 수 없다 고 생각 하기 때문에 일부 영문 라 이브 러 리 에 만 있 을 수 있다. 또한 이 스 크 립 트 는 모든 글자 에 코드 가 있 고 용량 이 매우 커서 한자 에 사용 하 는 것 은 거의 불가능 하 다. 전체 문자 가 100 개 이상 이 어야 만 사용 할 수 있다.
interpreter 는 이렇게 신기 하 다. 그 도 현재 가장 좋 은 기술 중 하나 로 벡터 글 자 를 격자 와 같이 선명 하 게 표현 할 수 있다.그 는 어떤 사 이 드 라인 의 거 리 를 벌 리 고 다른 부분 을 수축 시 켰 다. 어쨌든 사람의 생각 에 따라 한 것 이 고 이것 도 짜 인 절차 이다.
벡터 글꼴 의 최종 기술
1998 년 에 마이크로 소프트 는 LCD 에서 벡터 글씨체 의 선명 도 를 300% 까지 높 일 수 있 는 새로운 기술 을 발명 했다 고 주장 했다.이후 마이크로소프트 리더 라 는 소프트웨어 가 등장 했다.Adobe 도 약 함 을 보이 지 않 으 려 고 Acrobat 4 에서 CoolType 을 지 원 했 고 Linux 의 FreeType 라 이브 러 리 도 차 픽 셀 부 드 러 움 을 지원 하기 시작 했다.실제 효 과 를 보면 Acrobat 가 가장 잘 하고 유연 하 며 마이크로소프트 는 적당 한 조절 도구 가 부족 하 다. Linux 의 차 픽 셀 이 부 드 러 운 것 은 쓰레기 이 고 호랑이 에 따라 고양 이 를 그 리 는 것 이다.(ps: 그래서 ubuntu 의 중국 어 는 그렇게 어색 하 게 표 시 됩 니 다. 안 드 로 이 드 는 Liux 를 기반 으로 하지만 구 글 은 최적화 되 어 문자 표시 효과 가 질 적 으로 향상 되 었 습 니 다).
ClearType 은 컬러 로 테 두 리 를 그립 니 다. 대비 도가 강 한 문자, 예 를 들 어 흰색 바탕 에 검은색 글자 나 검은색 바탕 에 흰색 글자 가 가장 뚜렷 합 니 다.사실 이론 적 으로 클 리 어 타 입 은 디 스 플레이 정밀 도 를 300% 까지 끌 어 올 릴 수 있 지만 실제로는 200% 정도 밖 에 되 지 않 는 다.
일반적으로 액정 표시 장치 의 격자 분 포 는 매우 고 르 며, 각 점 은 빨간색 과 파란색 3 색 으로 배열 되 어 있다.우 리 는 보통 흰색 을 표시 하려 면 빨간색 과 파란색 을 모두 밝 혀 야 하고 검은색 은 표시 되 지 않 는 다.ClearType 은 점 의 개념 을 다시 확장 하여 근처 의 두 점 3 색 을 헷 갈 리 게 하고 앞의 점 의 색 을 빌려 뒤의 색 을 무시 합 니 다.이렇게 하면 전통 적 인 한 점 의 최소 단 위 를 1 / 3 점 의 단위 로 확장 할 수 있다.
클 리 어 타 입 기술 을 사용 하면 원래 의 글꼴 렌 더 링 이 더욱 선명 해 질 것 이다. 물론 LCD 모니터 에 만 한정 되 어 CRT 는 더욱 모호 해 질 것 이다.ClearType 의 또 하나의 관건 적 인 기술 은 리 눅 스 의 차 픽 셀 이 부 드 럽 고 배우 지 못 한 곳 이 므 로 빨간색 과 파란색 의 색상 밝기 균형 을 고려 해 야 한 다 는 것 이다.일반적으로 녹색 은 밝기 가 가장 높 고 파란색 은 가장 낮 기 때문에 우 리 는 녹색 을 표시 할 때 빨간색 과 파란색 을 넣 어 밝 기 를 낮 추고 파란색 을 표시 할 때 녹색 과 빨간색 을 넣 어 밝 기 를 높 여야 한다.이런 방법 은 경계의 색 변 을 그렇게 뚜렷 하지 않 게 하고 더욱 검은색 글자 처럼 보일 수도 있다.그러나 이런 방법 은 원래 디 스 플레이 의 정밀 도 를 300% 까지 높 일 수 있 었 던 기술 을 많이 낮 추 었 지만 200% 를 넘 었 다.
이상 의 자 료 는 결론 을 내 렸 다.
1. 글꼴 디 스 플레이 는 크 면 클 수록 선명 하지 않 습 니 다. 글꼴 픽 셀 과 장치 물리 픽 셀 이 점 대 점 (또는 1 대 N, N 이 정수 일 때 가장 선명 합 니 다).
2. 일부 도형 처리 소프트웨어 에서 예 를 들 어 Photoshop, 문 자 는 모두 알고리즘 을 통 해 최적화 되 고 시각 적 으로 핸드폰 보다 더욱 뚜렷 하 며 오래 볼 수 있다.이 차이성 은 객관 적 으로 존재 한다.
3. 핸드폰 과 컴퓨터 스크린 의 물리 적 픽 셀 크기 와 발광 배열 원리 가 다 르 기 때문에 디 테 일 한 특징 을 나타 내 고 색채 의 표 현 력 과 충격력 이 다 르 기 때문에 최종 효 과 는 특정한 장 치 를 기준 으로 한다.
확장 편:
문자 표시 효과 의 시각 적 감화력 을 높이 기 위해사람들 은 각종 서 체 를 설계 하고 무수 한 예술 효 과 를 넣 었 다.안 드 로 이 드 시스템 에서 TextView 구성 요 소 는 문자 의 표시 와 동작 을 봉인 합 니 다.전문 소프트웨어 처럼 문자 에 대해 모든 조작 을 할 수 는 없 지만 우리 가 안에 있 는 그림자 효과 api 를 합 리 적 으로 사용 하면 문자 가 핸드폰 에 나타 나 는 효 과 를 크게 향상 시 킬 수 있 습 니 다. 다음 에 저 는 demo 로 서로 다른 그림자 가 완전히 두 가지 효 과 를 가 져 올 것 입 니 다.벽돌 을 던 져 옥 을 끌 어 들 인 것 으로 간주 하 다.
1. 문자 가 선명 하 게 보이 도록
픽 셀 을 넣 은 투영 을 볼 수 있 고 글 이 뚜렷 하 며 질감 도 있다.
2. 문자 의 시각 적 입체 감 을 증가 시킨다.
오목 감:
볼록 감:
3. 그림 자 를 거꾸로 보이 게 하여 화면의 투과 성 을 증가 시킨다.
win 7 데스크 톱 아이콘 과 android 4.0 데스크 톱 아이콘 은 모두 Y 축 2 개의 픽 셀 의 투영 을 추가 하여 아이콘 의 감 염 력 과 시각 적 편안 도 를 증가 시 키 고 어느 정도 화면 을 더욱 선명 하고 투철 하 게 보이 게 한다.
결론: 1. 음영 을 합 리 적 으로 사용 하면 문자 표시 효 과 를 크게 향상 시 킬 수 있다.
2. 텍스트 그림자 소프트웨어 가 구현 되 었 습 니 다. 아이콘 투영 은 UI 가 디자인 할 때 자원 파일 에 직접 그 려 주 십시오.
사실 안 드 로 이 드 는 문자 음영 을 실현 하 는 것 이 매우 간단 합 니 다. 예 를 들 어 우 리 는 다음 과 같은 텍스트 효 과 를 실현 해 야 합 니 다.
a. 저 희 는 레이아웃 XML 파일 에서 TextView 구성 요 소 를 속성 태그 로 직접 정의 할 수 있 습 니 다.

	android:shadowColor="#B0000000"
	android:shadowRadius="3.0"
	android:shadowDx="3.0"
	android:shadowDy="3.0"

b. 원본 코드 에서 TextView 인 스 턴 스 방법 으로 설정 할 수 있 습 니 다.

mTextView = (TextView)findViewById(R.id.serif4);
mTextView.setShadowLayer(3, 3.0f, 3.0f, Color.BLACK);

Attribute Name
Related Method
Description
android:shadowColor
setShadowLayer(float,float,float,int)
그림자 의 색 을 정의 합 니 다.
android:shadowDx
setShadowLayer(float,float,float,int)
그림자 가 수평 방향 으로 이동 합 니 다.
android:shadowDy
setShadowLayer(float,float,float,int)
그림자 가 세로 방향 으로 이동 하 는데...
android:shadowRadius
setShadowLayer(float,float,float,int)
그림자 의 반지름.
둘 다 사용 이 간단 해서 실제 상황 에 따라 하 나 를 선택 하여 실현 할 수도 있 고 두 가 지 를 혼합 해서 사용 할 수도 있다.일반 보기 형 구성 요 소 는 xml 에서 정의 되 며 기능 형 구성 요 소 는 코드 에서 실현 하 는 것 이 편리 합 니 다.
Tips: 텍스트 음영 을 정의 하 는 4 개의 인 자 는 UI 디자인 원고 에서 제공 해 야 합 니 다.수치 가 불합리 하면 문자 가 더욱 모호 하고 보기 싫 게 보일 수 있 으 니 과 유 불 급 이 니 주의 하 시기 바 랍 니 다.
혹시 이것 도 보 세 요 '안 드 로 이 드 이미지 자원 디 스 플레이 효과 연구'.