Project-Canvas/draw-arc.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
class DrawingArc extends PaintFunction{

    constructor(contextReal){
        super();
        this.contextReal = contextReal;
        this.contextDraft = contextDraft;
    }

    onMouseDown(coord,event){
        this.origX = coord[0];
        this.origY = coord[1];
        this.startCoords = [];
        this.startCoords.push(coord[0], coord[1])

    }
    onDragging(coord,event){
        contextDraft.fillStyle = "#000000"
        this.contextDraft.strokeStyle = "#df4b26";
        contextDraft.clearRect(0,0,canvasDraft.width,canvasDraft.height);
        contextDraft.beginPath();
        this.contextDraft.strokeStyle = "#f44";
        this.contextDraft.lineWidth = 2;
        this.contextDraft.arc(this.startCoords[0], this.startCoords[1], 1, 0, 360 )
        this.contextDraft.closePath()
        this.contextDraft.stroke();
        this.radius = [];
        this.radius.push(Math.sqrt(Math.pow(coord[0]-this.startCoords[0], 2) + Math.pow(coord[1]-this.startCoords[1],2)))

        if (coord[1]-this.startCoords[1]<0) {
            //RH top arc
            contextDraft.arc(this.startCoords[0], this.startCoords[1], this.radius,(Math.atan2(coord[1]-this.startCoords[1], coord[0]-this.startCoords[0])), 0*Math.PI );
        } else if (coord[1]-this.startCoords[1]>0) {
            //RH bottom arc
            contextDraft.arc(this.startCoords[0], this.startCoords[1], this.radius,0*Math.PI, (Math.atan2(coord[1]-this.startCoords[1], coord[0]-this.startCoords[0])));
        }
            //LH top arc
            //contextDraft.arc(this.startCoords[0], this.startCoords[1], this.radius,Math.PI, (Math.atan2(coord[1]-this.startCoords[1], coord[0]-this.startCoords[0])));

            //LH bottom arc
            //contextDraft.arc(this.startCoords[0], this.startCoords[1], this.radius, (Math.atan2(coord[1]-this.startCoords[1], coord[0]-this.startCoords[0])), Math.PI);
        contextDraft.stroke();

    }

    onMouseMove(){

    }
    onMouseUp(coord){
        this.contextDraft.clearRect(0,0,canvasDraft.width,canvasDraft.height);
        this.contextReal.beginPath();
        if (coord[1]-this.startCoords[1]<0) {
            //RH top arc
            contextReal.arc(this.startCoords[0], this.startCoords[1], this.radius,(Math.atan2(coord[1]-this.startCoords[1], coord[0]-this.startCoords[0])), 0*Math.PI );
        } else if (coord[1]-this.startCoords[1]>0) {
            //RH bottom arc
            contextReal.arc(this.startCoords[0], this.startCoords[1], this.radius,0*Math.PI, (Math.atan2(coord[1]-this.startCoords[1], coord[0]-this.startCoords[0])));
        }
        this.contextReal.stroke();
    }
    onMouseLeave(){

    }
    onMouseEnter(){}
}