소개 (https://chobocho.tistory.com/2461396)
실행하기 http://www.chobocho.com/javascript/painter.html
전체 소스코드 https://github.com/chobocho/painter
chobocho/painter
Painter written html5. Contribute to chobocho/painter development by creating an account on GitHub.
github.com
6.1 원 그리기
원을 그리는 함수를 추가합니다.
circle = new Shape("Circle");
circle.mouseAction = new MouseAction(circleMouseUp, circleMouseDown, circleMouseMove);function circleMouseDown(event) {
console.log("circleMouseDown");
if (painter.isDraw()) {
return;
}
bufCtx.drawImage(canvas, 0, 0);
var startPos = getMousePosition(event);
painter.shape.point.x = startPos.X;
painter.shape.point.y = startPos.Y;
painter.setDrawMode(true);
}
function circleMouseMove(event) {
if (!painter.isDraw()) {
return;
}
var currentPos = getMousePosition(event);
cvs.beginPath();
// Need a delay
cvs.clearRect(0, 0, canvas.width, canvas.height);
cvs.drawImage(bufCanvas, 0, 0);
cvs.strokeStyle = painter.getColor();
var circle = {
X: Math.round((painter.shape.point.x + currentPos.X) / 2),
Y: Math.round((painter.shape.point.y + currentPos.Y) / 2),
R: Math.round(Math.abs(currentPos.Y - painter.shape.point.y) / 2)
};
cvs.arc(circle.X, circle.Y, circle.R, 0, Math.PI * 2);
cvs.closePath();
cvs.stroke();
}
function circleMouseUp(event) {
if (!painter.isDraw()) {
return;
}
var currentPos = getMousePosition(event);
bufCtx.beginPath();
bufCtx.strokeStyle = painter.getColor();
var circle = {
X: Math.round((painter.shape.point.x + currentPos.X) / 2),
Y: Math.round((painter.shape.point.y + currentPos.Y) / 2),
R: Math.round(Math.abs(currentPos.Y - painter.shape.point.y) / 2)
};
bufCtx.arc(circle.X, circle.Y, circle.R, 0, Math.PI * 2);
bufCtx.closePath();
bufCtx.stroke();
cvs.clearRect(0, 0, canvas.width, canvas.height);
cvs.drawImage(bufCanvas, 0, 0);
painter.setDrawMode(false);
}
6.2 도형의 선택
원과 선을 선택 할 수 있도록 html 파일에 함수를 연결 합니다.
[paint.js]
function selectShape(choosedShape) {
console.log("selectShape:" + choosedShape);
painter.setShape(choosedShape);
}Painter 객체에 선, 원을 tools라는 자료형에 추가를 합니다.
Painter.prototype.init = function () {
line = new Shape("Line");
line.mouseAction = new MouseAction(lineMouseUp, lineMouseDown, lineMouseMove);
this.tools[line.name] = line;
circle = new Shape("Circle");
circle.mouseAction = new MouseAction(circleMouseUp, circleMouseDown, circleMouseMove);
this.tools[circle.name] = circle;
this.shape = this.tools["Line"];
this.color = "black";
}function onLoadPage() {
// ...
painter = new Painter();
painter.init();
}6.3 기타 수정 사항
color 값은 모든 도형이 공통적으로 사용하므로,
shape 에서 painter 객체로 이동을 합니다.
Painter.prototype.init = function () {
// ...
this.color = "black";
}
여기까지 소스코드:
https://github.com/chobocho/painter/tree/master/doc/tutorial/006/src
chobocho/painter
Painter written html5. Contribute to chobocho/painter development by creating an account on GitHub.
github.com
공감과 댓글은 큰 도움이 됩니다.
'Coding > JavsScript 삽질기' 카테고리의 다른 글
| Javascript로 그림판 만들기 (자바스크립트로 그림판 만들기) - 007 (0) | 2019.12.25 |
|---|---|
| Javascript로 그림판 만들기 (자바스크립트로 그림판 만들기) - 006 (2) | 2019.12.17 |
| Javascript로 그림판 만들기 (자바스크립트로 그림판 만들기) - 005 (0) | 2019.12.10 |
| Javascript로 그림판 만들기 (자바스크립트로 그림판 만들기) - 004 (2) | 2019.11.26 |
댓글을 달아 주세요
2019.12.24 11:49 댓글주소 수정/삭제 댓글쓰기
비밀댓글입니다
안녕하세요. painter.html 파일에서 saveImage()로 검색하시면 됩니다.