Commit 5784ec04 authored by Ossi Laine's avatar Ossi Laine
Browse files

Change brush size (test version)

parent 7d5f7c7a
......@@ -35,6 +35,33 @@ $(document).ready(function() {
var clickY = new Array();
var clickDrag = new Array();
var paint;
var drawRadius=15;
// TODO: changing drawradius doesnt affect to the saved datapoints !!!
// Bigger brush should make more datapoints compared to smaller ones.
$(".canvas-container").bind('DOMMouseScroll',function(event) {
event.preventDefault()
// Change brush size
if (event.originalEvent.detail >= 0){
if (drawRadius >= 15) {
drawRadius -= 5;
}
} else {
if (drawRadius <= 15) {
drawRadius += 5;
}
}
// Show brush size to user
if (drawRadius == 10) {
this.firstElementChild.innerHTML = "small brush"
} else if (drawRadius == 15) {
this.firstElementChild.innerHTML = "normal brush"
} else if (drawRadius == 20) {
this.firstElementChild.innerHTML = "large brush"
}
})
function addClick(x, y, dragging)
{
......@@ -46,6 +73,12 @@ $(document).ready(function() {
clickDrag.push(dragging);
}
function drawPoint(x, y, radius) {
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.fill()
}
function redraw(){
......@@ -65,16 +98,19 @@ $(document).ready(function() {
context.globalAlpha = 0.2
// Gradient:
var gradient = context.createRadialGradient(lastX, lastY, 1, lastX, lastY, 15);
var gradient = context.createRadialGradient(lastX, lastY, 1, lastX, lastY, drawRadius);
gradient.addColorStop(0, "rgba(255,0,0,1)");
gradient.addColorStop(1, "rgba(255,0,0,0.1)");
// Draw circle with gradient
context.beginPath();
context.arc(lastX, lastY, 15, 0, 2 * Math.PI, false);
context.fillStyle = gradient
context.fill()
// Draw circle with gradient
drawPoint(lastX, lastY, drawRadius)
/*
drawPoint(lastX + 3, lastY, drawRadius)
drawPoint(lastX - 3, lastY, drawRadius)
drawPoint(lastX, lastY + 3, drawRadius)
drawPoint(lastX, lastY - 3, drawRadius)
*/
drawMaskToBaseImage()
/*
......
......@@ -98,7 +98,10 @@
{% if form.__name__ == 'embody' %}
<div class="canvas-container">
<span class="canvas-info"></span>
<canvas id="embody-canvas" width="200" height="100" style="border: 1px solid blue;" ></canvas>
</div>
<img id="baseImage" class="" src={{ url_for('static', filename='img/dummy_600.png') }} />
<img id="baseImageMask" class="hidden" src={{ url_for('static', filename='img/dummy_600_mask.png') }} />
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment