Created
April 21, 2017 20:12
-
-
Save rickychilcott/af7097cd83a9022555a26f990e80acbd to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title></title> | |
</head> | |
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> | |
<script src="http://fabricjs.com/lib/fabric.js"></script> | |
<body> | |
<canvas id="c" class="glucose_results"></canvas> | |
<button class="clear-canvas">Clear Canvas</button> | |
<button class="drawing-mode">Cancel drawing mode</button> | |
<button class="get-stuffs">Get Stuff</button> | |
</body> | |
<script> | |
$( document ).ready(function() { | |
(function() { | |
var canvas = this.__canvas = new fabric.Canvas('c', { | |
isDrawingMode: true | |
}); | |
window.canvas = canvas; | |
fabric.Object.prototype.transparentCorners = false; | |
var drawingModeEl = $('.drawing-mode'); | |
$('.clear-canvas').click(function() { | |
canvas.clear(); | |
window.lastKnownX = 0; | |
window.ignoreMouseMove = false; | |
}); | |
drawingModeEl.click(function() { | |
window.drawing = drawingModeEl; | |
canvas.isDrawingMode = !canvas.isDrawingMode; | |
if (canvas.isDrawingMode) { | |
drawingModeEl.text('Cancel drawing mode'); | |
} | |
else { | |
drawingModeEl.text('Enter drawing mode'); | |
} | |
}); | |
$(".get-stuff").click(function() { | |
canvas.path | |
}) | |
var pencil = new fabric.PencilBrush(canvas); | |
window.checkForNewXLine = function(pointer) { | |
window.lastKnownX = window.lastKnownX || 0; | |
if (pointer.x <= window.lastKnownX) { | |
return false; | |
} | |
window.lastKnownX = pointer.x; | |
return true; | |
} | |
pencil.onMouseDown = function(pointer) { | |
if(checkForNewXLine(pointer)){ | |
this._prepareForDrawing(pointer); | |
// capture coordinates immediately | |
// this allows to draw dots (when movement never occurs) | |
this._captureDrawingPath(pointer); | |
this._render(); | |
} else { | |
window.ignoreMouseMove = true; | |
} | |
}; | |
pencil.onMouseMove = function(pointer) { | |
window.ignoreMouseMove = window.ignoreMouseMove || false; | |
if(window.ignoreMouseMove == false && checkForNewXLine(pointer)){ | |
this._captureDrawingPath(pointer); | |
// redraw curve | |
// clear top canvas | |
this.canvas.clearContext(this.canvas.contextTop); | |
this._render(); | |
} | |
}; | |
pencil.onMouseUp = function(pointer) { | |
if (window.ignoreMouseMove == false) { | |
this._finalizeAndAddPath(); | |
} | |
window.ignoreMouseMove = false; | |
}; | |
canvas.freeDrawingBrush = pencil; | |
canvas.freeDrawingBrush.width = 2; | |
canvas.freeDrawingBrush.shadowBlur = 0; | |
canvas.freeDrawingBrush.shadowOffsetY = 0; | |
canvas.freeDrawingBrush.width = 1; | |
})(); | |
}); | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment