git.plutz.net Git - confetti/blob - static/therapy_draw.js

   1 // Copyright 2016 Paul Hänsch
   2 //
   3 // This file is part of Confetti.
   4 //
   5 // Confetti is free software: you can redistribute it and/or modify
   6 // it under the terms of the GNU Affero General Public License as published by
   7 // the Free Software Foundation, either version 3 of the License, or
   8 // (at your option) any later version.
   9 //
  10 // Confetti is distributed in the hope that it will be useful,
  11 // but WITHOUT ANY WARRANTY; without even the implied warranty of
  12 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  13 // GNU Affero General Public License for more details.
  14 //
  15 // You should have received a copy of the GNU Affero General Public License
  16 // along with Confetti.  If not, see <http://www.gnu.org/licenses/>.
  17
  18 body = document.body
  19 dbg = document.getElementById("jsdebug")
  20 canvas = document.getElementById("canvas")
  21 data=document.getElementById("image_serialize")
  22
  23 image = canvas.getContext("2d")
  24 mouse = 0
  25 image_serialize=""
  26
  27 // start and current coordinates of a draw
  28 // serves for tracking, whether path ends close to its beginning
  29 stx=0, sty=0
  30 cux=0, cuy=0
  31
  32 function setstroke(w) {
  33   image.lineWidth = w
  34   data.value += " stroke-width " + image.lineWidth
  35 }
  36 function setcol(c) {
  37   this.c = c
  38   image.strokeStyle = c
  39   image.fillStyle =  c
  40   data.value += " stroke " + c + "F"
  41 }
  42
  43 function relX(x){
  44   if ( body.clientWidth >= 800 ){
  45     return Math.floor(cscaleW * (x - canvas.offsetLeft))
  46   } else {
  47     return Math.floor(cscaleW * (x - canvas.offsetLeft + window.pageXOffset))
  48   }
  49 }
  50 function relY(y){
  51   if ( body.clientWidth >= 800 ){
  52     return Math.floor(cscaleH * (y - canvas.offsetTop))
  53   } else {
  54     return Math.floor(cscaleH * (y - canvas.offsetTop + window.pageYOffset))
  55   }
  56 }
  57
  58 function draw(x, y) {
  59   if ( mouse == 1){
  60     cux=relX(x), cuy=relY(y)
  61
  62     image.lineTo( cux, cuy )
  63     image.stroke()
  64
  65     image_serialize += " " + cux + "," + cuy
  66   }
  67 }
  68
  69 function drawstart(x, y) {
  70   mouse = 1
  71
  72   cscaleW = canvas.width / canvas.clientWidth
  73   cscaleH = canvas.height / canvas.clientHeight
  74
  75   stx=relX(x), sty=relY(y)
  76
  77   document.getElementsByName("penwidth").forEach(
  78     function(x, y, z){ if (x.checked) setstroke(x.value); }
  79   );
  80   document.getElementsByName("color").forEach(
  81     function(x, y, z){ if (x.checked) setcol(x.value); }
  82   );
  83
  84   image.beginPath()
  85   draw(x, y)  // why must this not use relative Coords ???
  86
  87   image_serialize = " polyline"
  88 }
  89
  90 function drawstop() {
  91
  92   // if path ends close to beginning ( < 50 px); then close path and fill
  93   if ( false && mouse == 1 && Math.sqrt( Math.pow(stx - cux, 2) + Math.pow(sty - cuy, 2)) <= 50 && c !== "#FFF" ){
  94     image.lineTo( stx, sty )
  95     image.stroke()
  96
  97     image.globalAlpha = .5
  98     image.fill()
  99     image.globalAlpha = 1
 100
 101     image_serialize += " " + stx + "," + sty
 102     data.value += " fill " + c + "8" + image_serialize
 103   } else if (mouse == 1)  {
 104     data.value += " fill #0000 " + image_serialize
 105   }
 106   dbg.innerHTML = " stx: " + stx + " cux: " + cux + " sty: " + sty + " cuy: " + cuy
 107
 108   image.closePath()
 109   image_serialize = ""
 110   mouse = 0
 111 }
 112
 113 window.addEventListener( 'mouseup',   function()   { drawstop() } )
 114 canvas.addEventListener( 'mousedown', function(e)  { drawstart(e.clientX, e.clientY) } )
 115 canvas.addEventListener( 'mousemove', function(e)  {      draw(e.clientX, e.clientY) } )
 116
 117 window.addEventListener( 'touchend',   function()  { drawstop() } )
 118 canvas.addEventListener( 'touchstart', function(e) { drawstart(e.touches[0].clientX, e.touches[0].clientY) } )
 119 canvas.addEventListener( 'touchmove',  function(e) { e.preventDefault(); draw(e.touches[0].clientX, e.touches[0].clientY) } )