Silverlight에서 윈도우 창처럼 크기 조정 가능한 컨트롤 구현 방법
윈도우 애플리케이션에서는 마우스를 폼의 테두리나 모서리에 올리면 대응하는 리사이즈 커서가 나타나며, 드래그로 창 크기를 조절할 수 있습니다. Silverlight에서도 유사한 기능을 사용자 정의 컨트롤에 구현할 수 있으며, 이를 위해 Canvas 배치와 마우스 이벤트 처리를 적절히 조합해야 합니다.
1. Canvas 내부에 컨트롤 배치
크기 조절이 필요한 UI 요소는 반드시 C ...
6월 27일 00:46에 게시됨
웹 기반 데이터 시각화 기초: Canvas, SVG 및 ECharts 활용
Canvas를 사용한 그래픽 그리기
HTML5의 <canvas> 요소는 자바스크립트를 통해 그래픽을 동적으로 생성할 수 있는 도구입니다. 기본 크기는 300×150픽셀이며, 스타일 속성이 아닌 width와 height 속성으로 크기를 지정해야 합니다. 캔버스 내부에 텍스트나 HTML 요소를 직접 삽입해도 렌더링되지 않으며, 모든 그리기는 JavaScript를 통해 수행되어야 합니다.
<c ...
6월 22일 01:21에 게시됨
JavaScript에서의 다양한 유틸리티 함수 구현
배열 내포함 여부 확인
하나의 배열이 다른 배열을 완전히 포함하는지 확인하는 방법입니다.
const isSubset = (arr1, arr2) => arr2.every(item => arr1.includes(item));
이벤트 버스 활용
이벤트를 전송하고 수신하는 방법입니다.
// 이벤트 발송
this.$bus.$emit('data-change', { field: 'value', key: 'uniqueKey' });
// 이벤트 수신
this.$bus.$on('data-rec ...
6월 20일 21:09에 게시됨
Canvas 상호작용을 통한 그래픽 요소 이벤트 처리 기법
기본 원리: 캔버스 내 요소의 클릭 감지
캔버스는 단순히 2D 픽셀 그리기 도구이지만, 사용자 인터랙션을 위해선 그 위에 그려진 각 그래픽 요소를 개별적으로 식별하고 이벤트를 처리할 수 있어야 합니다. 기본적으로 <canvas> 요소 자체만이 자바스크립트에서 접근 가능한 객체이며, 내부의 도형이나 이미지는 "그림물"일 뿐입니다. 따라서 이를 해결하기 위해선 ...
5월 21일 11:12에 게시됨