Raphael로 웹에 낙서를 해봅시다. -TEXT편-

안녕하세요?

DJ.VUD 입니다.

 

지난시간에 Raphael.js 에 대한 기본적이고 기초적인 내용에 대해서 알아보았습니다.

(http://cyberx.tistory.com/85)

 

이번에는  TEXT 에 대하여 알아보겠습니다.

 

TEXT 생성

일단 TEXT는 크롬:개발자 도구로 살펴볼때

이러한 형태를 가지고 있습니다.

 

마치.. <p> 에 <span>을 넣어 style로 관리하는 모양새랑 비슷합니다.

 

Raphael TEXT를 만드는 방법은 아주 간단합니다.

var text = paper.text( x좌표, y좌표, '텍스트 입력');

TEXT도 다른 도형 또는 path와 마찬가지로 기본 색상은 검정색입니다.

폰트명은... 크롬에서 기본만 딱 그려봤습니다.

폰트명은 Arial이고 폰트크기는 10px 입니다.

(브라우저마다 폰트모양은 조금씩 다를 수 있습니다.)

TEXT 속성

이제 우리는 디자이너의 요구를 받아들여야 할때가 왔습니다.

폰트모양, 폰트 색상, 크기 전부다 마음에 들지 않는다고 하네요. 

var text = paper.text( x좌표, y좌표, '텍스트 입력');

text.attr({

'fill' : '폰트색상',

'text-anchor' : '폰트정렬',

'font-family' : '폰트이름',

'font-size' : '폰트크기',

'font-weight' : '폰트두께',

'font' : '폰트명 폰트크기'

});

속성명	기본값	설명
fill	'black'	'red', '#ff0000' 등과 같은 색상에 관련된 값
fill-opacity	1	0~1까지의 값. 소수점단위
text-anchor	'middle'	text-align과는 조금(?) 다릅니다.  'start' = 'left'  'middle' = 'center'  'end' = 'right'
font-family	'Arial'	'Dotum' 과 같은 폰트 명
font-size	'10px'	폰트사이즈 + 'px'
font-weight	'normal'	'bold'
font	'10px "Arial"'	폰트의 크기와 폰트명을 동시에 입력합니다.

그리고, 여기에 Raphael Reference 에는 적혀져 있지 않지만

'font-style' : 'italic' // 폰트 기울임

위 속성도 적용할 수 있습니다.

그럼 TEXT 속성을 바꿔볼까요?

var text = paper.text( 100, 100, '텍스트입니다.');

text.attr({

'fill' : '#828864',

'font-family' : 'Nanum Gothic',

'font-size' : '20px',

'font-weight' : 'bold',

'font-style' : 'italic'

});

크롬에서 확인 결과 ) 

이렇게 설정한 모든 속성이 적용되었습니다.

TEXT 속성 중 text-anchor 에 대해 좀 더 다뤄보겠습니다.

방금 전 TEXT를 생성한 소스에 X좌표 100, Y좌표 100을 입력하였습니다.

그럼 TEXT가 어떤 위치로 만들어질까요?

빨간 점이 있는 곳이 바로 x : 100, y : 100 입니다.

이렇게 TEXT는 아무것도 설정하지 않는다면 x와 y좌표의 정중앙을 기준으로 Center, Middle 정렬을 합니다.

여기에 text-anchor 속성을 적용해 보겠습니다.

text-anchor : 'start' 적용시 )

text-anchor : 'middle' 적용시 )

text-anchor : 'end' 적용시 )

이렇게 TEXT를 생성하는 좌표를 기준으로 텍스트가 왼쪽, 가운데, 오른쪽 정렬로 맞춰집니다.

CSS처럼 'left', 'center', 'right' 로 되있으면 좀더 알아보기 쉬웠을 텐데 아쉽기만 합니다.

더 안타까운 것은..

CSS의 vertical-align 같은 속성이 없다는 것입니다.

.....응?

(이렇게 헐!?!!! 했던 기억이 나네요.)

getBBox()

getBBox()는 SVG Node들의 위치 및 크기 등에 관련된 정보를 알고 싶을때 사용합니다.

저는 SVG로 작업하다보면 vertical-align의 middle이 아닌 top 같이 위치시키고 싶을 때가 엄청 많았는데요.

그래서 제가 사용한 방법은 

var txtSize = text.getBBox();

text.attr('y', 100 + Math.round(txtSize.height / 2));

리턴 속성	리턴 속성값 설명
cx	TEXT의 x와 x2 중간위치
cy	TEXT의 y와 y2 중간위치
x	TEXT의 시작 x위치
x2	TEXT의 끝 x위치
y	TEXT의 시작 y위치
y2	TEXT의 끝 y위치
width	TEXT의 넓이
height	TEXT의 높이

이렇게 Raphael에서 제공하는 Node size 측정하는 함수로 TEXT의 Height를 알아내어 절반을 더해줍니다.

결과 )

 

앞의 이미지는 TEXT노드의 위치를 좀더 알아보기 쉽게 드래그한 상태입니다. 딱 정확하게 내려오죠?

그러나 뒤 이미지에서 보이듯이 100 위치에서 너무 내려왔네요. 

이는 getBBox()에서 뱉어낸 height가 20이 아닌 27이기 때문이죠. 

getBBox()가 너무나도 좋은 녀석이라는건 알지만 지금 상황에서는 적절치 못합니다.

그래서 저는 그냥 폰트속성 중에 'font-size': '20px' 을 지정해줬으니 이것을 활용합니다.

var textSize = parseInt(text.attr('font-size'));

text.attr('y', 100 + Math.round(textSize / 2));

결과 )

 

지금까지 TEXT에 대한 기본적인 내용을 알아보았습니다.

추가로 getBBox()라는 녀석도요.

여기에서는 훅치고 빠진 녀석이지만 실제 작업에서는 유용하게 쓰이는 아이입니다.

소중히 다뤄주세요. ㅎㅎ

그럼 또 다음 시간에 뵙겠습니다!