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

drawing dicomizer sample
author Sebastien Jodogne <s.jodogne@gmail.com>
date Wed, 07 May 2014 13:23:08 +0200
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/Resources/Samples/WebApplications/DrawingDicomizer/drawing.js	Wed May 07 13:23:08 2014 +0200
@@ -0,0 +1,100 @@
+/**
+ * Copyright 2010 William Malone (www.williammalone.com)
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+
+/**
+ * This code comes from the blog entry "Create a Drawing App with
+ * HTML5 Canvas and JavaScript" by William Malone. It is the "simple
+ * demo" of a pure HTML5 drawing application.
+ *
+ * http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
+ *
+ * To keep this sample code as simple as possible, we do not implement
+ * hacks for the canvas of Microsoft Internet Explorer.
+ **/
+
+
+if ($.browser.msie) {
+  alert('Please use Mozilla Firefox or Google Chrome. Microsoft Internet Explorer is not supported.');
+}
+
+
+var context;
+var clickX = new Array();
+var clickY = new Array();
+var clickDrag = new Array();
+var paint;
+
+
+function addClick(x, y, dragging)
+{
+  clickX.push(x);
+  clickY.push(y);
+  clickDrag.push(dragging);
+}
+
+
+function Redraw() 
+{
+  context.fillStyle = '#ffffff';
+  context.fillRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
+  
+  context.strokeStyle = '#df4b26';
+  context.lineJoin = 'round';
+  context.lineWidth = 5;
+  
+  for (var i=0; i < clickX.length; i++) {		
+    context.beginPath();
+    if (clickDrag[i] && i) {
+      context.moveTo(clickX[i - 1], clickY[i - 1]);
+    } else {
+      context.moveTo(clickX[i] - 1, clickY[i]);
+    }
+    context.lineTo(clickX[i], clickY[i]);
+    context.closePath();
+    context.stroke();
+  }
+}
+
+
+$(document).ready(function() {
+  context = document.getElementById('canvas').getContext('2d');
+  Redraw();
+
+  $('#canvas').mousedown(function(e) {
+    var mouseX = e.pageX - this.offsetLeft;
+    var mouseY = e.pageY - this.offsetTop;
+    
+    paint = true;
+    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
+    Redraw();
+  });
+
+  $('#canvas').mousemove(function(e) {
+    if(paint) {
+      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
+      Redraw();
+    }
+  });
+
+  $('#canvas').mouseup(function(e) {
+    paint = false;
+  });
+
+  $('#canvas').mouseleave(function(e) {
+    paint = false;
+  });
+});