Mercurial > hg > orthanc

annotate Resources/Samples/WebApplications/DrawingDicomizer/drawing.js @ 3730:ae31ba2b09a6

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