FilesExpand file tree

 master

/

canvas.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

135 lines (117 loc) · 3.57 KB

 master

/

canvas.js

Copy path

Top

File metadata and controls

• Code
• Blame

135 lines (117 loc) · 3.57 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

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

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

/*

JavaScript functions that are executed by running the corresponding methods of a Canvas object

Donot use these functions by making a js file. Instead use the python Canvas class.

See canvas.py for help on how to use the Canvas class to draw on the HTML Canvas

*/

//Manages the output of code executed in IPython kernel

function output_callback(out, block){

console.log(out);

//Handle error in python

if(out.msg_type == "error"){

console.log("Error in python script!");

console.log(out.content);

return ;

}

script = out.content.data['text/html'];

script = script.substr(8, script.length - 17);

eval(script)

}

//Handles mouse click by calling mouse_click of Canvas object with the co-ordinates as arguments

function click_callback(element, event, varname){

var rect = element.getBoundingClientRect();

var x = event.clientX - rect.left;

var y = event.clientY - rect.top;

var kernel = IPython.notebook.kernel;

var exec_str = varname + ".mouse_click(" + String(x) + ", " + String(y) + ")";

console.log(exec_str);

kernel.execute(exec_str,{'iopub': {'output': output_callback}}, {silent: false});

}

function rgbToHex(r,g,b){

var hexValue=(r<<16) + (g<<8) + (b<<0);

var hexString=hexValue.toString(16);

hexString ='#' + Array(7-hexString.length).join('0') + hexString; //Add 0 padding

return hexString;

}

function toRad(x){

return x*Math.PI/180;

}

//Canvas class to store variables

function Canvas(id){

this.canvas = document.getElementById(id);

this.ctx = this.canvas.getContext("2d");

this.WIDTH = this.canvas.width;

this.HEIGHT = this.canvas.height;

this.MOUSE = {x:0,y:0};

}

//Sets the fill color with which shapes are filled

Canvas.prototype.fill = function(r, g, b){

this.ctx.fillStyle = rgbToHex(r,g,b);

}

//Set the stroke color

Canvas.prototype.stroke = function(r, g, b){

this.ctx.strokeStyle = rgbToHex(r,g,b);

}

//Set width of the lines/strokes

Canvas.prototype.strokeWidth = function(w){

this.ctx.lineWidth = w;

}

//Draw a rectangle with top left at (x,y) with 'w' width and 'h' height

Canvas.prototype.rect = function(x, y, w, h){

this.ctx.fillRect(x,y,w,h);

}

//Draw a line with (x1, y1) and (x2, y2) as end points

Canvas.prototype.line = function(x1, y1, x2, y2){

this.ctx.beginPath();

this.ctx.moveTo(x1, y1);

this.ctx.lineTo(x2, y2);

this.ctx.stroke();

}

//Draw an arc with (x, y) as centre, 'r' as radius from angles start to stop

Canvas.prototype.arc = function(x, y, r, start, stop){

this.ctx.beginPath();

this.ctx.arc(x, y, r, toRad(start), toRad(stop));

this.ctx.stroke();

}

//Clear the HTML canvas

Canvas.prototype.clear = function(){

this.ctx.clearRect(0, 0, this.WIDTH, this.HEIGHT);

}

//Change font, size and style

Canvas.prototype.font = function(font_str){

this.ctx.font = font_str;

}

//Draws "filled" text on the canvas

Canvas.prototype.fill_text = function(text, x, y){

this.ctx.fillText(text, x, y);

}

//Write text on the canvas

Canvas.prototype.stroke_text = function(text, x, y){

this.ctx.strokeText(text, x, y);

}

//Test if the canvas functions are working

Canvas.prototype.test_run = function(){

var dbg = false;

if(dbg)

alert("1");

this.clear();

if(dbg)

alert("2");

this.fill(0, 200, 0);

if(dbg)

alert("3");

this.rect(this.MOUSE.x, this.MOUSE.y, 100, 200);

if(dbg)

alert("4");

this.stroke(0, 0, 50);

if(dbg)

alert("5");

this.line(0, 0, 100, 100);

if(dbg)

alert("6");

this.stroke(200, 200, 200);

if(dbg)

alert("7");

this.arc(200, 100, 50, 0, 360);

if(dbg)

alert("8");

}