잠송 키우기

video 위에 svg를 캔버스처럼 놓고 svg element를 띄우려 하는데 계속 비디오 뒤로 숨어버리는 문제가 발생했다. z-index도 먹지않고 html안에 inline으로 style을 삽입해도 계속 뒤로 숨었다 ㅠ 해결방법>> 기본 svg요소의 css 말고 svg에 아이디값을 줘서 그 아이디값으로 css를 설정하니까 해결되었다. .svg{ position: ~~~~ ~~~~ x-index: 10; } #svg1{ position: ~~~~ ~~~~ x-index: 10; }

javascript에는 포인터가 없다. 숫자, 문자 등의 경우 Call by Value로 복사된다. Call by Reference를 하기 위해선 객체를 사용해야한다.

MDN Web Docs 참고 : https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault event.preventDefault - Web API | MDN 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소합니다. developer.mozilla.org event.preventDefault를 이용하여 submit,a등 form안에서 입력값을 전송할때 페이지가 다시 로딩되는 현상을 막을 수 있다. 리로드현상을 막는 대신 input창이 자동으로 초기화되지않으니 값을 초기화하는 코드도 함께 넣어준다. function handleSubmit(event) { event.preventDefault() value = '' ; } i..

Video 위에 Canvas를 overlap한 뒤에 xy좌표를 그렸다. 처음에 원점을 찍고 원하는 x축의 방향과크기대로 두번째점을 찍고 마지막으로 y축의 점을 찍는데, x축의 y값은 원점의 y값과 같으며 y축의 x값은 원점의 x값과 같다.(수평과 수직을 유지하기 위함, 각도 조절은 안된다.) 실행영상 ( 실제로 코드를 실행해보면 Canvas위의 십자모양 마우스커서로 클릭한 정가운데의 위치에 점이 찍히는데, 영상에서는 오차가 있어보인다... ) 좌표계 설정 xy좌표계 그리는 코드 canvas.addEventListener('click', function (ev) { console.log("Canvas Click"); var loc = windowToCanvas(canvas, ev.clientX, ev.cl..

SVG예제들 https://css-tricks.com/svg-properties-and-css/ SVG Properties and CSS SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup. css-tricks.com

전체코드 : https://github.com/chasonghui/PEVCE/commit/77e21aee2f165498cd3644c2b33f0135d5f71d91 canvas over video, (x,y)on mouse · chasonghui/PEVCE@77e21ae Permalink This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. Browse files canvas over video, (x,y)on mouse Loading branch information Showing 1 changed file with 68 additions and 1 del..

전체코드 : https://github.com/chasonghui/PEVCE/commit/6391d8bef4d51a138d21865b084368b2e3b98a6b initial commit · chasonghui/PEVCE@6391d8b Permalink This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. Browse files initial commit Loading branch information Showing 2 changed files with 113 additions and 0 deletions. +20 −0 video.cs github.com..