Sending a object to server with jQuery -
i have jsfiddle set because there decent amount of code cp here.
but first problem. send shape object server processing on mouseup. problem having when add jquery ajax or load functions test ajax sort of run away code , freezes.
first code add can try in jsfiddle
$('body').load('index.php/main/add_shape', shape, function () { shape.points["x"]}); now code on js fiddle sake of being able @ here , indexing.
html
<body> <canvas id="drawn" height="200" width="200"> <p>your browser doesn't support html5 , canvas element. should upgrade 1 of following<br> <a href="http://www.google.com/chrome">google chrome</a><br> <a href="http://www.mozilla.com/">firefox</a><br> <a href="http://www.apple.com/safari/">safari</a><br> <a href="http://www.opera.com/">opera</a> </p> </canvas> </body> css
canvas { border: 1px solid #000; } javascript
var eventmap = { mousemove: "move", touchmove: "move", mousedown: "down", touchstart: "down", mouseup: "up", touchend: "up" }; function shape (type, color, height, width, radius, x, y) { this.type = type; this.color = color; this.h = height; this.w = width; this.r = radius; this.points = ["x","y"]; this.points["x"] = [x]; this.points["y"] = [y]; }; var tools = {} $(window).ready(function () { function init () { hex = 000000; canvas = $('#drawn').get(0) c = canvas.getcontext('2d'); c.linejoin = "round"; c.linecap = "round"; c.strokestyle = "#"+hex; c.linewidth = 1; tool = new tools['pencil'](); $('canvas').bind('mousedown mousemove mouseup', mouse_draw); } function mouse_draw (e) { var pos = findpos(this); e._x = e.pagex - pos.x; e._y = e.pagey - pos.y; if (eventmap[e.type] == "down") { shapes = new shape (1, 2, null, null, null, e._x, e._y); } else if (eventmap[e.type] == "move") { shapes.points["x"].push(e._x); shapes.points["y"].push(e._y); } else if (eventmap[e.type] == 'up') { shapes.points["x"].push(e._x); shapes.points["y"].push(e._y); alert(shapes.points["x"].tostring()); } var func = tool[eventmap[e.type]]; if (func) { func(e); } } init(); }); function findpos(obj) { var curleft = curtop = 0; if (obj.offsetparent) { { curleft += obj.offsetleft; curtop += obj.offsettop; } while (obj = obj.offsetparent); return { x: curleft, y: curtop }; } } /*****************tools*************/ tools.pencil = function () { var tool = this; tool.started = false; tool.down = function (e) { c.beginpath(); c.moveto(e._x, e._y); tool.started = true; shape = new shape (pencil, c.strokestyle, null, null, null, e._x, e._y); }; tool.move = function (e) { if (tool.started) { c.lineto(e._x, e._y); c.stroke(); shape.points["x"].push(e._x); shape.points["y"].push(e._y); } }; tool.up = function (e) { if (tool.started) { tool.started = false; } }; } as can see when add jquery load line tool.up freezes.
if have nice new browser ...
tool.up = function (e) { if (tool.started) { tool.started = false; alert(json.stringify(shape)); } }; (or can steal json code json.org) have parse json serverside
Comments
Post a Comment