블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday

'이미지'에 해당되는 글 2건

  1. 2014.06.30 [Swing] 같은 그림 찾기 게임
  2. 2014.02.04 [Javascript] 이미지맵 에디터(ImageMap Editor) v1.0



 자바(JAVA)를 처음 공부하면서 간단하게 만들어 본 스윙(Swing) 프로젝트이다. 

 역시 만들면서 배우는게 빠르기 때문에 몰 만들어 볼까 고민하다, 옛날에 실버라이트로 만들던 게임(?!)인 "같은그림 찾기" 게임을 만들어 보기로 결심하고 모르는 부분은 구글링하면서 만들어 보았다. 비록, 허접하지만 저와 같이 스터디를 시작한 분들에게 도움이 되길 바란다. 


1. 작동 모습


[그림 1 - 시작 화면]


[그림 2 - 게임 진행화면]



[영상 1 - 실행화면]


2. 프로젝트 구성



[그림 3 - 프로젝트 구성]


[그림 4 - 프로젝트 파일 설명]



※ 프로젝트 전체 소스 ↓↓


StudyPhotoGame.zip




Posted by happydong
, |



이미지맵 에디터(ImageMap Editor) v1.0

ㅁ 탄생 배경

 

 회사에서 일하면서 레이어팝업 형태의 이벤트성 공지 팝업을 만드는 경우가 종종 있다. 그럴때 마다 이미지를 잘라 HTML문서 형태로 만들자니 귀찮고 단순히 링크만 연결하면 끝인데... 해서 이미지맵를 이용해서 링크를 걸게 되는데, 나 같은 프로그래머는 포토샵 툴을 설치 하지 않으니... 그림판으로 대충 좌표를 찾아서 링크를 걸게 된다. 정말 귀찮은 작업이라 할 수 있겠다. 그래서 만들었다. 그냥 원하는 영역을 드래그해서, 그 곳에 링크를 걸 수 있도록 하는 일명 "이미지맵 에디터(ImageMap Editor)"!! 기능은 단순하지만, 그냥저냥 쓰기 편하다. 나와 같은 고생하는 사람들을 위해 파일을 공유 한다.

 

ㅁ 매뉴얼

 

 1. 객체 생성

 

 var imgEditor = new Happydong.ImageMapEditor({

            objId: "#popPanel",

            guideLineColor: "#A7ED00",

            isOnDetailView: true,

            detailViewSize: 100,

            detailViewBorderColor: "#000"

        });

[코드 1 - 객체 생성 관련]
 
 - 위 코드 1과같이 인스턴스(Instance)를 생성합니다. 해당 생성 파라미터(Parameters)설명은 아래와 같다.
  *  objId - 이미지 편집판 ID
  *  guideLineColor - 가이드선 색상을 지정.
  *  isOnDetailView - 가이드선 상세보기창 볼지여부. (Default : false)
  *  detailViewSize - 가이드선 상세보기창의 사이즈를 지정. (Default : 50)
  *  detailViewBorderColor - 가이드선 상세보기창의 Border 컬러를 지정.

 

 2. 이미지 추가

imgEditor.setImage("imageUrl.jpg");

[코드 2 - 이미지 추가 관련]

 

 - 타켓(편집 대상) 이미지를 넣도록 한다.

 

 3. 이미지맵 태그 반환

 

var outputTag = imgEditor.getImageMap();

[코드 3 - 이미지맵 태그 반환 관련]

 - 편집된 이미지를 img map태그로 반환한다.

 

 4. 에디터 초기화

 

imgEditor.clearEditor();

[코드 4 - 이미지맵 에디터 초기화 관련]

 

 - 에디터를 초기화 한다.

 

이상 간단하게 매뉴얼을 정리해 본다.

(이 스크립트를 Jquery 라이브러리 기반을 두고 있기 때문에 Jquery는 필수로 필요하다.)

 

ㅁ 다운로드 및 데모(Demo)

  - 다운로드 파일 :


Happydong_ImageMap_v1.zip



  - 데모 : [바로가기]


** 혹시나, 파일을 다운받아 사용하시는 분들이 있다면, 버그에 대한 신고는 댓글 또는 메일(master@happydong.kr)으로 보내 주시면 감사하겠습니다.

 

 

 

 

 

Posted by happydong
, |