kineticjs

问题 Is there anyway to make the texts and/or shapes be hyperlinks? Being that when they are clicked, they bring up new browser and when you hover over them, they show location of the url? 回答1: You can't make the browser to show the url of links in statusbar which are not an a tag. But you can indeed ad a click handler on kinetic objects and make them act a link. text.on('click', function() { // do something }); http://jsfiddle.net/4JYGL/ 来源： https://stackoverflow.com/questions/16405588/kineticjs

问题 I previously asked how to fill a shape with a checkerboard effect using html5 canvas. HTML5 Canvas Fill with two colours and i was given a jsfiddle to show how to do this. http://jsfiddle.net/NdUcv/2/ var can = document.getElementById('canvas1'); var ctx = can.getContext('2d'); // set up a pattern, something really elaborate! var pattern = document.createElement('canvas'); pattern.width = 40; pattern.height = 40; var pctx = pattern.getContext('2d'); pctx.fillStyle = "rgb(188, 222, 178)"; pctx

问题 This was answered at this question using KineticJS 4.6.0 providing this fiddle But... any idea how to do this on the latest version of kineticjs? I tried the same fiddle with kineticjs 4.7.2: http://jsfiddle.net/qNtSg/ I just changed drawFunc with the new API drawFunc: function (context) { ... context.fillStrokeShape(this); } compositing is not working 回答1: The Kinetic.Shape has changed in recent versions. Now the Shape drawFunc receives a wrapper of the context rather than a canvas. However,

问题 I am trying to introduce a grid function (to add/remove) a grid on a canvas. I pulled most of the following code: var make_gr id = function() { var grid = new Kinetic.Layer(); var r = new Kinetic.Rect({ x: 0, y: 0, width: W, height: H, fill: 'transparent' }); grid.add(r); for (i = 0; i < w + 1; i++) { var I = i * CELL_SIZE; var l = new Kinetic.Line({ stroke: "black", points: [I, 0, I, H] }); grid.add(l); } for (j = 0; j < h + 1; j++) { var J = j * CELL_SIZE; var l2 = new Kinetic.Line({ stroke

问题 I've got an interesting task. I need to detect a click on the border of a shape in Kinetic JS. In this case the shape is a polygon but bonus points if it works with any shape. My first idea would be to draw lines around the border of the shape, perhaps with an opacity of 1, and then using their click events on pick up the click. It's a bit of PT though so I thought I'd run it past here and see if there were any other ideas. Thanks for the help! 回答1: You can do it by combining two shapes

问题 globalCompositeOperation with KineticJS describes how to make a hole in a rectangle by a circle. Instead of a circle I would like to use SVG path to make the hole, such as: m 876.30799 492.53209 c -36.64554 -0.29484 -69.69962 33.8121 -67.84069 70.49382 3.60444 27.60835 34.32996 46.34894 60.8096 40.13747 10.35153 -2.31261 21.0251 -4.39193 30.54799 -9.18203 10.45071 -6.35814 19.46448 -14.76346 29.73686 -21.39213 10.83886 -8.06083 21.32637 -16.94052 29.19035 -28.02964 -1.53049 -9.55445 -13.2442

问题 I cannot find a tutorial or documentation showing how to change canvas's textBaseline property in KineticJS. If you look in the Kinetic.Text documentation you won't find any mention of "base.." anything, and the Kinetic Text tutorial does not demonstrate its use either. Did textBaseline make it into KineticJS? I did a jsFiddle here showing how textBaseline works on a raw canvas element, but I cannot figure out the property for doing the same thing in KineticJS. I know the documentation is

问题 I read the documentation on KineticJS Docs and it says that: destroy() - remove and destroy self remove() - remove self from parent, but don't destroy If what I understand is correct, the remove() function removes the node from the parent but is still allocated in the memory. Whereas destroy() completely frees the memory, is that correct? Can somebody explain in layman terms what are some complications if I used destroy over remove? Thank you in advance. Warmest Regards, Dandy Ling 回答1: I

问题 Where can I find the Docs of a previous release of KineticJS. At http://kineticjs.com/docs/ there is only the doc of the current release. Since the Kinetic API is changing fast I need to have a look at the older version 4.6.0 回答1: Hope it can help you waiting a better answer : https://web.archive.org/web/20130812021657/http://kineticjs.com/docs/index.html 4.6 release date of August 12, and this is exactly the date of the shot... but it seems to be the 4.5.5 doc... however, differences are few

问题 Here is the structure I have Layer: ParentGroup: -Kinetic Image -ChildGroup - Kinetic rectangle - Kinetic Text On my kinetic image (that I retrieve from the server), there is a region of interest. This region of interest is shown by a rectangle (kinetic rectangle here). And I write some label inside this region (which is the kinetic text). I would like to apply some manipulations to the whole group. Translation is ok, but I have problems with zoom and rotation. Here is my zoom function