javascript - Fixing the canvas offset in Raphael.js when DOM element centered -


i'm creating circles in raphael.js canvas clicking action. when canvas drawn @ origin of website works fine. but when move middle type offseting happens , when click on right side of canvas circles drawn @ left side of canvas. though have listener action canvas , not div append to, here code:

<body>  <div id="container"></div> </body>

here js:

var canvas = raphael("container", 500, 500); var ourcanvas = $('svg').last(); ourcanvas.attr("id", "canvas"); var canvashandler = $("#canvas"); //we create div class append our canvas var containerhandler = $("#container"); var circleclass = $("circle.quincy"); var justdragged = false; canvashandler.mouseup(function (e) { var mousex = e.pagex; var mousey = e.pagey; makecircle(mousex, mousey); });    function makecircle(mousex, mousey) {  var radius;  var fill;  var thiscirclesid = string(new date().gettime());  var circle = canvas.circle(mousex, mousey, 50).attr({      fill: "hsb(.8, 1, 1)",      stroke: "none",      opacity: .5,  }); }

here jsfiddle

i wonder if way i'm using event position correct. suggestion more welcome.

thanks

m

i figured out after realizing offset of new position of svg causing mouse event not recognize real position. found blog post shows how use offsetparent method calculate new position of canvas relative parent . here code:

$(document).ready(function () { //we create our canvas , add id var canvas = raphael("container", 500, 500); var ourcanvas = $('svg').last(); ourcanvas.attr("id", "canvas"); var canvashandler = $("#canvas"); //we create div class append our canvas var containerhandler = $("#container"); var circleclass = $("circle.quincy"); var justdragged = false; canvashandler.mouseup(function (e) {     var mousex = e.pagex - findpos(this)[0];     var mousey = e.pagey - findpos(this)[1];     makecircle(mousex, mousey);     findpos(this);     console.log("this position of mouse in x: " + e.pagex);     console.log("this position of mouse in y: " + e.pagey); });   function findpos(obj) {     var curleft = curtop = 0;     if (obj.offsetparent) {         {             curleft += obj.offsetleft;             curtop += obj.offsettop;         } while (obj == obj.offsetparent);         console.log(curleft);         console.log(curtop);         // return [curleft, curtop];     }     return [curleft, curtop]; }

as can see findpos(obj) returns , array of new position of x , y. substract mousex , mousey real position on svg when clicking.

update

doing more reading , asking around. didn't realize type of elements web browser returns. instead of using e.pagex , e.pagey. offsetx offers position of mouse in respect parent giving real coordinates. code this:

canvashandler.mouseup(function (e) { var mousex = e.offsetx; var mousey = e.offsety; makecircle(mousex, mousey); findpos(this);

});

this makes easier since offset takes consideration real position of mouse in respect element.


Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more