프론트엔드

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

CyberI 2016. 7. 14. 20:03


안녕하세요?

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

 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()라는 녀석도요.

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

소중히 다뤄주세요. ㅎㅎ



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