Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| <center> | |
| <table><tr> | |
| <td> | |
| <canvas id="canvas" width="256" height="256" style="border: solid 1px #000;box-sizing: border-box;"></canvas> | |
| </td> | |
| <td> | |
| <form action="./" method="POST" id="init_id"> | |
| <input type = "submit" value="Initialize"> | |
| </form> | |
| <label><input type="checkbox" id="show_anchors" checked>Show anchor points</label> | |
| </td> | |
| </tr></table> | |
| <table border="1"> | |
| <tr><td>Mouse drag:</td><td>Translation</td></tr> | |
| <tr><td>Middle mouse button:</td><td>Set anchor point</td></tr> | |
| <tr><td>Mouse wheel:</td><td>Zoom in & out</td></tr> | |
| <tr><td>'i' or 'o' key + mouse drag:</td><td>Translation with zooming in & out</td></tr> | |
| <tr><td>'s' key:</td><td>style mixing</td></tr> | |
| </table> | |
| </center> | |
| <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> | |
| <script> | |
| // Canvas | |
| var cnvs = document.getElementById('canvas'); | |
| var ctx = cnvs.getContext('2d'); | |
| // Define variables | |
| const cnvWidth = 256; | |
| const cnvHeight = 256; | |
| var clickFlg = 0; | |
| var bgColor = "rgb(0,0,0)"; | |
| var img_base64 = {{canvas_img|tojson}}; | |
| var sx0, sy0, sx, sy; | |
| var dz = 0; | |
| var stop_points = []; | |
| var mouse_button; | |
| var zoom_in = 0; | |
| var zoom_out = 0; | |
| var show_anchors = document.getElementById('show_anchors'); | |
| show_anchors.addEventListener('change', e => { | |
| draw_image_on_canvas(img_base64); | |
| }); | |
| setBgColor(); | |
| function draw_image_on_canvas(img_base64){ | |
| if(img_base64.length!=0){ | |
| var img = new Image(); | |
| img.src = img_base64; | |
| ctx.drawImage(img, 0, 0, 256, 256); | |
| img.onload = function(){ | |
| ctx.drawImage(img, 0, 0, 256, 256); | |
| draw_points_on_canvas(); | |
| } | |
| } | |
| } | |
| function draw_points_on_canvas(){ | |
| if(show_anchors.checked){ | |
| stop_points.forEach(function(value){ | |
| ctx.beginPath(); | |
| ctx.arc( value[0], value[1], 5, 0 * Math.PI / 180, 360 * Math.PI / 180, false ); | |
| ctx.fillStyle = "rgb(135,206,235)"; | |
| ctx.fill(); | |
| ctx.strokeStyle = "rgb(128,128,128)"; | |
| ctx.lineWidth = 2; | |
| ctx.stroke(); | |
| }); | |
| } | |
| } | |
| draw_image_on_canvas(img_base64); | |
| // Events on canva | |
| $("#canvas").mousedown(function(e){ | |
| clickFlg = 1; | |
| sx0 = e.offsetX; | |
| sy0 = e.offsetY; | |
| sx = e.offsetX; | |
| sy = e.offsetY; | |
| mouse_button = e.button; | |
| if(mouse_button==1){ | |
| show_anchors.checked = 1; | |
| let rad = 5; | |
| let filtered_points = stop_points.filter((pt)=>{ | |
| return((pt[0]-sx)*(pt[0]-sx)+(pt[1]-sy)*(pt[1]-sy)>rad*rad); | |
| }); | |
| if(filtered_points.length<stop_points.length){ | |
| stop_points = filtered_points; | |
| }else{ | |
| stop_points.push([sx,sy]); | |
| } | |
| draw_image_on_canvas(img_base64); | |
| } | |
| }).mouseup(function(){ | |
| clickFlg = 0; | |
| }).mousemove(function(e){ | |
| if(!clickFlg) return false; | |
| //draw(e.offsetX, e.offsetY); | |
| if(mouse_button==0){ | |
| show_anchors.checked = 0; | |
| var ex = e.offsetX; | |
| var ey = e.offsetY; | |
| var dx0 = ex-sx0; | |
| var dy0 = ey-sy0; | |
| var dx = ex-sx; | |
| var dy = ey-sy; | |
| if(Math.sqrt(dx0*dx0+dy0*dy0)>5){ | |
| $.post("/translate", {dx:dx,dy:dy,dz:dz,sx:sx,sy:sy,stop_points:JSON.stringify(stop_points),zi:zoom_in,zo:zoom_out}).done(function(data) { | |
| img_base64 = $.parseJSON(data).img; | |
| draw_image_on_canvas(img_base64); | |
| }) | |
| sx0 = ex; | |
| sy0 = ey; | |
| //sx = ex; | |
| //sy = ey; | |
| } | |
| } | |
| }); | |
| cnvs.addEventListener('wheel', (e) => { | |
| show_anchors.checked = 0; | |
| sx = e.offsetX; | |
| sy = e.offsetY; | |
| if(e.deltaY<0){ | |
| dz -= 1; | |
| }else{ | |
| dz += 1; | |
| } | |
| $.post("/zoom", {dz:dz,sx:sx,sy:sy,stop_points:JSON.stringify(stop_points)}).done(function(data) { | |
| img_base64 = $.parseJSON(data).img; | |
| draw_image_on_canvas(img_base64); | |
| }) | |
| }); | |
| document.addEventListener('keydown', e => { | |
| if(e.key=="s"){ | |
| $.post("/changestyle").done(function(data) { | |
| img_base64 = $.parseJSON(data).img; | |
| stop_points = []; | |
| dz = 0; | |
| draw_image_on_canvas(img_base64); | |
| }) | |
| } | |
| if(e.key=="r"){ | |
| $.post("/reset").done(function(data) { | |
| img_base64 = $.parseJSON(data).img; | |
| stop_points = []; | |
| dz = 0; | |
| draw_image_on_canvas(img_base64); | |
| }) | |
| } | |
| if(e.key=="i"){ | |
| zoom_in = 1; | |
| } | |
| if(e.key=="o"){ | |
| zoom_out = 1; | |
| } | |
| }); | |
| document.addEventListener('keyup', e => { | |
| if(e.key=="i"){ | |
| zoom_in = 0; | |
| } | |
| if(e.key=="o"){ | |
| zoom_out = 0; | |
| } | |
| }); | |
| function setBgColor(){ | |
| ctx.fillStyle = bgColor; | |
| ctx.fillRect(0,0,cnvWidth,cnvHeight); | |
| } | |
| document.getElementById('init-id').addEventListener('submit', function (e) { | |
| e.preventDefault(); | |
| var form = this; | |
| var base64 = cnvs.toDataURL(); | |
| var newInput = document.createElement("input"); | |
| newInput.type="hidden"; | |
| newInput.name = "canvas"; | |
| newInput.value=base64; | |
| form.appendChild(newInput); | |
| form.submit(); | |
| }, false); | |
| </script> | |
| </body> | |
| </html> |