html
html
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
<!DOCTYPE html>
<html>
<head>
<title>Paint Canvas</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<!--<header style="font-size:24px"><b>Paint Application</b></header> -->
<body>
<section class= "Controls" id ="Eraser">Eraser</section>
<!-- Sliders for color selection -->
<section class= "Controls" id ="sliders">
<label for ="redSel">Red</label>
<input class = "slider" type="range" min="0" max="255" value="200" id="redSel" step="1" >
<output for ="redSel" id="redVal">200</output>
<br>
<label for ="greenSel">Green</label>
<input class ="slider" type="range" min="0" max="255" value="0" id="greenSel" step="1" >
<output for ="greenSel" id="greenVal">0</output>
<br>
<label for="blueSel">Blue</label>
<input class="slider" type="range" min="0" max="255" value="0" id="blueSel" step="1" >
<output for="blueSel" id="blueVal">0</output>
<br>
<label for="alphaSel">Alpha</label>
<input class="slider" type="range" min="0" max="1" value="1" id="alphaSel" step=".1" >
<output for="alphaSel" id="alphaVal">1</output>
<br>
Enter to Rename, Shift+Enter to Preview
css
css
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
label {
float:left;
width:50px;
}
.Controls {
float:left;
height:120px;
margin-right:5px;
margin-left: 0px;
margin-bottom:10px;
margin-top:10px;
border: 0px;
padding: 0px;
border-radius:10%;
}
.slider{
width:80px;
}
.Buttons {
float: left;
height:20px;
width : 80px;
margin-right:10px;
margin-left: 10px;
Enter to Rename, Shift+Enter to Preview
js
js
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
$(function(){
alert("Paint program that lets you draw shapes by using multiple fingers at the same tine. Adujusting the size changes the radius of the brush and width of the lines. Spacing is adjusted dynamically. Press the eraser button twice to clear the print area. SurfaceEvents Object 1.0 Wraps touch and mouse events into surfaceEvents for the Paint object to capture. Tracks multiple touches.");
// alert("Paint App that uses multiple touches to draw shapes. Also includes fully adjustable rgba and eraser function(Click again for clear).SurfaceEvents Object 1.0 Wraps touch and mouse events into surfaceEvents for the Paint object to capture. Tracks multiple touches. Can be locked to a touch to ignore other touches.Enjoy");
var paintTool = new Paint();
});
/* reference for basic touch interface
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events */
/****************************************
* Wraps the Touch API and Mouse API to
* handle touch and drag events for multiple
* touches or mouse. Raises its own
* surfaceEvents with relaive coordinates to
* be caught and handled by higher level
* framework. Note can be locked to a touch
* to ignore other touches. This is to
* make drag and drop easily handled by a
* Parent Object.
*****************************************/
function SurfaceEvents (element,spacing){
this.activeTouches = [];
this.singleTouch = false;
this.lockTouch = null;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run