dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved pointers and brush types.

Browse Source
This commit is contained in:
Devine Lu Linvega 2016-11-11 17:59:16 -08:00
parent 33592730dd
commit e52a72ab43
4 changed files with 50 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -3,9 +3,10 @@
<link rel="stylesheet" type="text/css" href="links/main.css"/> <link rel="stylesheet" type="text/css" href="links/main.css"/>
<script type="text/javascript" src="scripts/position.js"></script> <script type="text/javascript" src="scripts/position.js"></script>
<script type="text/javascript" src="scripts/pointer.js"></script> <script type="text/javascript" src="scripts/pointer.js"></script>
<script type="text/javascript" src="scripts/brush.js"></script>
</head> </head>
<body> <body>
<canvas id="myCanvas" width="400" height="400" style="background:#efefef"></canvas> <canvas id="myCanvas" width="1280" height="800" style="background:#efefef"></canvas>
<input id ='commander'/> <input id ='commander'/>
<script type="text/javascript" src="scripts/main.js"></script> <script type="text/javascript" src="scripts/main.js"></script>
</body> </body>

19
scripts/main.js
View File

@ -1,15 +1,26 @@
var pointer = new Pointer();
var canvas = document.getElementById('myCanvas'); var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
var brush = new Brush();
canvas.addEventListener('mousemove', function(e) { canvas.addEventListener('mousemove', function(e) {
pointer.draw(e); brush.draw(e);
}, false); }, false);
canvas.addEventListener('mousedown', function(e) { canvas.addEventListener('mousedown', function(e) {
pointer.can_draw = true; brush.draw_start(e);
}, false); }, false);
canvas.addEventListener('mouseup', function(e) { canvas.addEventListener('mouseup', function(e) {
pointer.can_draw = false; brush.draw_stop(e);
}, false); }, false);
var mirror_test = new Pointer();
mirror_test.mirror = new Position(200,0);
brush.add_pointer(mirror_test);
var mirror_test2 = new Pointer(new Position(0,10));
mirror_test2.mirror = new Position(200,0);
brush.add_pointer(mirror_test2);
brush.add_pointer(new Pointer(new Position(0,10)));

35
scripts/pointer.js
View File

@ -1,11 +1,12 @@
function Pointer() function Pointer(offset = new Position())
{ {
this.position = new Position(); this.offset = offset;
this.can_draw = false; this.mirror = null;
this.position_prev = null;
this.draw = function(e) this.draw = function()
{ {
if(this.can_draw === false){return;} if(!this.position_prev){this.position_prev = this.position(); }
var id = context.createImageData(1,1); var id = context.createImageData(1,1);
var d = id.data; var d = id.data;
@ -13,12 +14,30 @@ function Pointer()
d[1] = 0; d[1] = 0;
d[2] = 0; d[2] = 0;
d[3] = 255; d[3] = 255;
context.putImageData(id,e.clientX,e.clientY); context.putImageData(id,this.position().x,this.position().y);
context.beginPath();
context.moveTo(this.position_prev.x,this.position_prev.y);
context.lineTo(this.position().x,this.position().y);
context.stroke();
this.position_prev = this.position();
} }
this.position = function() this.position = function()
{ {
var rect = canvas.getBoundingClientRect(); if(this.mirror){
return new Position(evt.clientX - rect.left,evt.clientY - rect.top); return new Position(500 - (brush.position.x + this.offset.x), brush.position.y + this.offset.y);
}
return new Position(brush.position.x + this.offset.x, brush.position.y + this.offset.y);
}
this.start = function()
{
}
this.stop = function()
{
this.position_prev = null;
} }
} }

5
scripts/position.js
View File

@ -2,4 +2,9 @@ function Position(x = 0,y = 0)
{ {
this.x = x; this.x = x;
this.y = y; this.y = y;
this.distance_to = function(target)
{
return Math.sqrt( (this.x-target.x)*(this.x-target.x) + (this.y-target.y)*(this.y-target.y) );
}
} }