{"id":7883,"date":"2015-11-04T21:59:15","date_gmt":"2015-11-04T21:59:15","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/11\/04\/zoom-and-pan-in-kineticjs-open-source-projects-ericdrowell-kineticjs\/"},"modified":"2015-11-04T21:59:15","modified_gmt":"2015-11-04T21:59:15","slug":"zoom-and-pan-in-kineticjs-open-source-projects-ericdrowell-kineticjs","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/11\/04\/zoom-and-pan-in-kineticjs-open-source-projects-ericdrowell-kineticjs\/","title":{"rendered":"Zoom and Pan in KineticJS-open source projects ericdrowell\/KineticJS"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/i.stack.imgur.com\/rTmu7.jpg?s=128&amp;g=1\" \/> <strong>Duopixel<\/strong><\/p>\n<p>You can simply add <code>.setDraggable(\"draggable\")<\/code> to a layer and you will be able to drag it as long as there is an object under the cursor. You could add a large, transparent <code>rect<\/code> to make everything draggable. The zoom can be achieved by setting the scale of the layer. In this example I&#8217;m controlling it though the mousewheel, but it&#8217;s simply a function where you pass the amount you want to zoom (positive to zoom in, negative to zoom out). Here is the code:<\/p>\n<pre><code>var stage = new Kinetic.Stage({\n    container: \"canvas\",\n    width: 500,\n    height: 500\n});\n\nvar draggableLayer = new Kinetic.Layer();\ndraggableLayer.setDraggable(\"draggable\");\n\n\/\/a large transparent background to make everything draggable\nvar background = new Kinetic.Rect({\n    x: -1000,\n    y: -1000,\n    width: 2000,\n    height: 2000,\n    fill: \"#000000\",\n    opacity: 0\n});\n\ndraggableLayer.add(background);\n\n\n\/\/don't mind this, just to create fake elements\nvar addCircle = function(x, y, r){\n  draggableLayer.add(new Kinetic.Circle({\n        x: x*700,\n        y: y*700,\n        radius: r*20,\n        fill: \"rgb(\"+ parseInt(255*r) +\",0,0)\"\n    })\n  );\n}\n\nvar circles = 300\nwhile (circles) {\n  addCircle(Math.random(),Math.random(), Math.random())\n  circles--;\n}\n\nvar zoom = function(e) {\n  var zoomAmount = e.wheelDeltaY*0.001;\n  draggableLayer.setScale(draggableLayer.getScale().x+zoomAmount)\n  draggableLayer.draw();\n}\n\ndocument.addEventListener(\"mousewheel\", zoom, false)\n\nstage.add(draggableLayer)\n<\/code><\/pre>\n<p>http:\/\/jsfiddle.net\/zAUYd\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Duopixel You can simply add .setDraggable(&#8220;draggable&#8221;) to a layer and you will be able to drag it as long as there is an object under the cursor. You could add a large, transparent rect to make everything draggable. The zoom can be achieved by setting the scale of the layer. In this example I&#8217;m controlling [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7883","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7883"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7883\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}