paperjs - Change mouse cursor while hover over specific canvas paths with Paper.js -
actually (using w3.org doc's example http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#dom-context-2d-ispointinpath) did figured out how done in raw html5canvas/javascript: http://jsfiddle.net/qtu9e/4/
above used ispointinpath(x, y) syntax, according mentioned docs there ispointinpath(path, x, y[, w ]) in path can given check.
this 1 problem solver, can't work passing paperjs's path object it!
i'll continue searching solution, because else have deadlines, appreciated!
ok, here answer!
<canvas id="mycanvas" width="256" height="128"></canvas> <div id="xycoordinates"></div>
#mycanvas { border: 1px solid #c3c3c3; } #xycoordinates { font: 9pt sans-serif; }
var canvas = document.getelementbyid("mycanvas"); // canvas // initialisation stuff make things work out of paperscript context // have have things done way because jsfiddle don't allow save source script type="text/paperscript" paper.install(window); paper.setup(canvas); var mypath = new paper.path.circle([64, 64], 32); // red one, 'pointer' cursor on mypath.style = { fillcolor: '#ff0000' }; var scndpath = new paper.path.circle([192, 64], 32); // green one, without cursor accent scndpath.style = { fillcolor: '#00ff00' }; paper.view.draw(); // have call manually when working javascript directly var hitoptions = { // trigger hit on 'fill' part of path 0 tolerance segments: false, stroke: false, fill: true, tolerance: 0 }; var tool = new paper.tool(); // again manually. life easier script type="text/paperscript" tool.onmousemove = function (event) { // installig paperjs event var x = event.point.x; var y = event.point.y; document.getelementbyid("xycoordinates").innerhtml = "coordinates: (" + x + "," + y + ")"; var hitresult = mypath.hittest(event.point, hitoptions); // ispointinpath if (hitresult) { document.body.style.cursor = "pointer"; } else { document.body.style.cursor = "default"; } }; the point missed paperjs has own onmousemove , hittest(), ispointinpath() wrapper.
don't know how did happen, because i'm using in project! perhabs need have rest %)
and way, there still problems: looks hittest() fires strange false positives, sontimes doesn't trigger should. check out point (46,96) , (77,64) coordinates!
upd: tested same code in 1 html file localy same artifacts: http://pastebin.com/hiygknw0
Comments
Post a Comment