SelectArea 다시 읽기

영역 지정 UI

• jQuery나 bootstrap 등이 없이. 최대한 Tag(node)의 기본 기능을 사용하도록.
• github : https://github.com/mins01/ui_SelectArea

주요 멤버 변수

• SelectArea.selectedArea : 선택된 영역을 나타내는 DIV. CSS .selectArea-layout 참고
• SelectArea.outOfRange : 영역 기준 대상을 벗어날 수 있는지에 대한 설정(default:false)

주요 멤버 변수

• SelectArea(html_node) //위치 기준 대상,이동 위치 기준으로 설정하며 SelectArea UI를 준다.
• SelectArea.setTarget(html_node) //위치 기준 대상
• SelectArea.setRangeTarget(html_node) //이동 위치 기준 대상
• SelectArea.isShow() //현재 보이고있는가?
• SelectArea.show(x,y,x1,y1) //시작과 끝의 좌표로 보이기(값이 없으면 이전 정보 사용)
• SelectArea.showFullsize() //타겟의 크기에 맞춰서 보이기
• SelectArea.showWithSize(x,y,w,h) //시작과 크기로 보이기(미지정 시 최대치)
• SelectArea.hide() //감추기
• SelectArea.enable() //사용가능
• SelectArea.disable() //사용불가
• SelectArea.getSelectedAreaRect() //현재 선택된 영역의 정보(target에 상대적)
• SelectArea.moveAndSize(x,y,w,h) //이동 및 너비 조정,(이동 위치에 따라 너비가 변경 될 수 있다)
• SelectArea.moveBy(x,y,fixedSize) //x,y 좌표로 상대적 이동
• SelectArea.sizeBy(w,h) //상대적 크기 조절
• SelectArea.redraw() //현재의 정보로 다시 그린다. (기본적으로 메소드 호출후 자동으로 불린다.)
• SelectArea.drawFromCoordinateBy(x,y,x1,y1) //시작과 끝좌표의 상대 값으로 다시 그린다.
• SelectArea.setAppendParent(html_node) //SelectArea가 위치할 부모 node 설정.(기본은 document.body)
• SelectArea.getAppendParent() //위치할 부모 node 리턴

CustomEvent

• hide : hide메소드 호출시
• show : show 관련 메소드 호출 시
• change : selectedArea 가 변경되면 발생한다
• enable : enable 메소드 호출시
• disable : disable 메소드 호출시

dependance

• toDraggable : https://github.com/mins01/ui_toDraggable.git

---

test-box-0

test-box0

.isShow() .show() .showFullsize() .show(30,30,10,10) .show(30,30,1000,1000) .show(100,100,100,100) .showWithSize(100,100,100,100) .hide()
.enable() .disable() .destroy()
.moveBy(-1,0).moveBy(1,0) .moveBy(0,-1.moveBy(0,1) .sizeBy(-1,0).sizeBy(1,0) .sizeBy(0,-1).sizeBy(0,1)
sa0.moveTo(w,h) : x:/ y:/
sa0.sizeTo(w,h) : w:/ h:/
.outOfRange=true outOfRange=false
moveAndSize(x,y,w,h) : x:/ y:/ w:/ h:/
font-size:px
결과 .getSelectedAreaRect()
결과 .selectedArea.getBoundingClientRect()

---

이미지 크기 조정

이미지 기본크기로

---

텍스트

---

no bg

---

outOfRange = true

---

.setTarget()

.setRangeTarget()

css : selectArea-pointer-lg , selectArea-pointer-md , selectArea-pointer-sm , selectArea-pointer-xs

css .selectArea-no-info

contenteditable

내용 확인 내용 확인

.setAppendParent()

rotate

.selectArea-info-outer

.selectArea-no-pointers