Project-Canvas/draw-polygon.js at master · CHA0173/Project-Canvas · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
class DrawingPolygon extends PaintFunction{

    constructor(contextReal){
        super();
        this.contextReal = contextReal;
        this.contextDraft = contextDraft;
        this.startCoords = [];
        this.startLineCoords = [];
        this.endLineCoords = [];
    }

    onMouseDown(coord,event){
        this.contextDraft.strokeStyle = "#f44";
        this.contextDraft.lineWidth = 2;
        this.origX = coord[0];
        this.origY = coord[1];

        if (this.startCoords == '') {
            this.startCoords.push(coord[0], coord[1])
            this.startLineCoords.push(coord[0], coord[1]);
        }

        if (this.endLineCoords[0] !== this.startLineCoords[0] && this.endLineCoords[1] !== this.startLineCoords[1]) {
            this.contextDraft.clearRect(0,0,canvasDraft.width,canvasDraft.height);
            this.contextReal.beginPath();
            this.contextReal.moveTo(this.startLineCoords[0], this.startLineCoords[1])
            this.startLineCoords = [];
            this.startLineCoords.push(coord[0], coord[1]);
            if (Math.abs(this.startCoords[0] - this.endLineCoords[0]) < 5 && Math.abs(this.startCoords[1] - this.endLineCoords[1]) < 5) {
                this.endLineCoords[0] = this.startCoords[0];
                this.endLineCoords[1] = this.startCoords[1];
                this.contextReal.closePath()
                this.startLineCoords = [];
                this.startCoords = [];
            }
            this.contextReal.lineTo(this.endLineCoords[0],this.endLineCoords[1])
            this.contextReal.stroke()


        }

    }
    onDragging(coord,event){

    }

    onMouseMove(coord){
        this.contextReal.strokeStyle = "#f44";
        this.contextReal.lineWidth = 2;
        this.contextDraft.clearRect(0,0,canvasDraft.width,canvasDraft.height);
        this.contextDraft.beginPath();
        this.contextDraft.moveTo(this.startLineCoords[0], this.startLineCoords[1])
        this.contextDraft.lineTo(coord[0],coord[1])
        this.contextDraft.stroke();
        this.endLineCoords = [];
        this.endLineCoords.push(coord[0], coord[1]);

    }
    onMouseUp(coord,event){

    }
    onMouseLeave(){

    }
    onMouseEnter(){}
}