Mercurial > hg > orthanc

comparison Resources/Samples/WebApplications/DrawingDicomizer/drawing.js @ 805:56a813a4714d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
drawing dicomizer sample
author Sebastien Jodogne <s.jodogne@gmail.com>
date Wed, 07 May 2014 13:23:08 +0200
parents
children
comparison
equal deleted inserted replaced
804:a017d1a89b4f 805:56a813a4714d
1 /**
2 * Copyright 2010 William Malone (www.williammalone.com)
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 **/
16
17
18 /**
19 * This code comes from the blog entry "Create a Drawing App with
20 * HTML5 Canvas and JavaScript" by William Malone. It is the "simple
21 * demo" of a pure HTML5 drawing application.
22 *
23 * http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
24 *
25 * To keep this sample code as simple as possible, we do not implement
26 * hacks for the canvas of Microsoft Internet Explorer.
27 **/
28
29
30 if ($.browser.msie) {
31 alert('Please use Mozilla Firefox or Google Chrome. Microsoft Internet Explorer is not supported.');
32 }
33
34
35 var context;
36 var clickX = new Array();
37 var clickY = new Array();
38 var clickDrag = new Array();
39 var paint;
40
41
42 function addClick(x, y, dragging)
43 {
44 clickX.push(x);
45 clickY.push(y);
46 clickDrag.push(dragging);
47 }
48
49
50 function Redraw()
51 {
52 context.fillStyle = '#ffffff';
53 context.fillRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
54
55 context.strokeStyle = '#df4b26';
56 context.lineJoin = 'round';
57 context.lineWidth = 5;
58
59 for (var i=0; i < clickX.length; i++) {
60 context.beginPath();
61 if (clickDrag[i] && i) {
62 context.moveTo(clickX[i - 1], clickY[i - 1]);
63 } else {
64 context.moveTo(clickX[i] - 1, clickY[i]);
65 }
66 context.lineTo(clickX[i], clickY[i]);
67 context.closePath();
68 context.stroke();
69 }
70 }
71
72
73 $(document).ready(function() {
74 context = document.getElementById('canvas').getContext('2d');
75 Redraw();
76
77 $('#canvas').mousedown(function(e) {
78 var mouseX = e.pageX - this.offsetLeft;
79 var mouseY = e.pageY - this.offsetTop;
80
81 paint = true;
82 addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
83 Redraw();
84 });
85
86 $('#canvas').mousemove(function(e) {
87 if(paint) {
88 addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
89 Redraw();
90 }
91 });
92
93 $('#canvas').mouseup(function(e) {
94 paint = false;
95 });
96
97 $('#canvas').mouseleave(function(e) {
98 paint = false;
99 });
100 });