Do it now!

Minim은 간단한 메모 관리 앱니다.

어떻게 만들었나: https://chobocho.tistory.com/2461418

소개 https://chobocho.tistory.com/2461396
실행하기 http://www.chobocho.com/javascript/painter.html
전체 소스코드 https://github.com/chobocho/painter

9.1 Undo/Redo 기능 구현

Undo/Redo 기능을 구현하기 위해서는 모든 사용자의 동작을 저장해야 합니다

그럼 사용자의 동작을 저장하기 위해서, 선을 그리거나, 원을 그리는 동작을

아래와 같이 커맨드로 정의 해야 합니다.

그리고 그 커맨드를 stack에 저장합니다.

소개 https://chobocho.tistory.com/2461396
실행하기 http://www.chobocho.com/javascript/painter.html
전체 소스코드 https://github.com/chobocho/painter

8.1 저장하기

painter.html에 save를 위한 버튼을 추가 합니다.

<div>
  <a id="saveImage" download="image.png">
      <INPUT type="button" value="Save" onClick="saveImage()" />
  </a>
</div>

그리고, painter.js에 saveImage()함수를 추가합니다.

function saveImage() {
  console.log("saveImage()");
  var imageName = document.getElementById("title").value;
  console.log(imageName.lenght);
  if (imageName.length == 0) {
    imageName = "image";
  }
  imageName += ".png";
  var savedImage = document.getElementById("saveImage");
  var image = document
    .getElementById("canvas")
    .toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
  savedImage.setAttribute("download", imageName);
  savedImage.setAttribute("href", image);
}

여기 까지 소스코드는 아래 링크를 참고 하시면 됩니다.

https://github.com/chobocho/painter/commit/dceabd6f3ace4d39e21260d593dc55a2d15e47df

소개 https://chobocho.tistory.com/2461396
실행하기 http://www.chobocho.com/javascript/painter.html
전체 소스코드 https://github.com/chobocho/painter

7.1 Refactoring

선, 원등을 그릴때, 반복되는 코드를 preprocessMouseUp(), postprocessMouseUp() 으로 묶습니다.

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();
}

위의 코드를 아래와 같이 수정하였습니다. 기존 함수 내부를 preprocess()와 postprocess()로 나누어서 묶은 것입니다.

Shape.prototype.preprocessMouseUp = function() {
  bufCtx.beginPath();
  bufCtx.strokeStyle = painter.getColor();
}

Shape.prototype.postprocessMouseUp = function() {
  bufCtx.closePath();
  bufCtx.stroke();

  cvs.clearRect(0, 0, canvas.width, canvas.height);
  cvs.drawImage(bufCanvas, 0, 0);

  this.setDrawMode(false);
}

function circleMouseMove(event) {
  if (!painter.isDraw()) {
    return;
  }
  
  painter.preprocessMouseMove();
  
  var currentPos = getMousePosition(event);
  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);
  
  painter.postprocessMouseMove();
}

7.2 나머지 도형 구현

직선, 원과 같이 삼각형, 직사각형에 대해서도 mouseDown, mouseMove, mouseUp에 대한 이벤트를 정의하고

painter 객체에 추가해 줍니다.

여기까지의 참고 자료는 아래 링크를 참고 하시면 됩니다.

https://github.com/chobocho/painter/tree/master/doc/tutorial/007

소개 (https://chobocho.tistory.com/2461396)
실행하기 http://www.chobocho.com/javascript/painter.html
전체 소스코드 https://github.com/chobocho/painter

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

공감과 댓글은 큰 도움이 됩니다.

chobomemo에서  약간의 버그를 고치고, 이름도 변경하였습니다.

다운로드:

Minim은 간단한 메모 관리 앱니다.

개인, 회사, 공공기관 어디에서도 되는 무료 앱입니다. 

어떻게 만들었나: https://chobocho.tistory.com/2461418

출처: https://chobocho.tistory.com/ [Do it now!]

소개:  https://chobocho.tistory.com/2461396

실행하기: http://www.chobocho.com/javascript/painter.html

전체 소스코드: https://github.com/chobocho/painter

 

경고  

주인장은 자바스크립트 초보입니다.  

자바스크립트 고수의 비급을 원하시는 분은 다른 자료를 참고 하시기 바랍니다.  

과도한 기대는 과도한 실망을 가져옵니다.    

본 강의는 자바스크립트만 사용합니다.  

크롬에서의 동작만 보장 합니다.  

Canvas 기초 사용법은 구글링하시면 친절한 강의가 많습니다

5.1 색상 변경 기능 구현

아래와 같이 painter.html 의 각 색상 아이콘에 selectColor() 함수를 연결 합니다.

painter.js에 아래와 같이 selectColor() 함수를 구현 합니다.

function selectColor(choosedColor) {
  console.log("selectColor:" + choosedColor);
  painter.shape.setColor(choosedColor);
}

function Shape(name_) {
    this.name = name_;
    this.point = new Point(0, 0);
    this.color = "black";
    this.state = false;
    this.filled = false;
    this.mouseAction;
}

Shape.prototype.setColor = function(color) {
    this.color = color;
}

Shape.prototype.getColor = function() {
    return this.color;
} 

그럼 아래와 같이 선을 그릴 때, 색상을 변경 할 수 있습니다.

여기까지 구현된 소스는 아래와 같습니다.

https://github.com/chobocho/painter/commit/7a79b5edc328ac81706280188f9525d4e17f4c09

chobomemo에서  약간의 버그를 고치고, 이름도 변경하였습니다.

다운로드:

Minim은 간단한 메모 관리 앱니다.

개인, 회사, 공공기관 어디에서도 되는 무료 앱입니다. 

어떻게 만들었나: https://chobocho.tistory.com/2461418

다운로드:

ChoboMemo는 간단한 메모 관리 앱니다.

개인, 회사, 공공기관 어디에서도 되는 무료 앱입니다. 

어떻게 만들었나: https://chobocho.tistory.com/2461418

떨어져 가는 기억력을 보완하고자,

Python 으로 메모관리 툴을 만들어 보기로 했다.

다운로드: https://chobocho.tistory.com/2461419

소스코드: https://github.com/chobocho/ChoboMemo2

1. 요구사항 정의

먼저, 아래와 같이 요구사항을 간단히 정리해 보았다.

2. 설계

그리고 이를 바탕으로 간단히 UML을 그려 보았다

3. 결과

완성된 모습은 아래와 같다