kineticjs

kineticjs rect fillText

由 允我心安 提交于 2019-12-10 10:42:37
问题 I have KineticJS rect already fill with 'blue' color, I want to show Text on this rect box. But my below code not showing anything. Also I need to assign this label text on button click, the code for the same is also below. drawShape = new Kinetic.Rect({ id: shapeId, name: shapeName, x: 0, y: 0, width: 150, height: 40, fill: "#00D2FF", stroke: "black", strokeWidth: 3, fillText: "Step" + stepNumber }); function OnApplyPropertiesClick(){ drawShape.fillText(document.getElementById("txtLabel")

html5 canvas kineticjs event

由 我与影子孤独终老i 提交于 2019-12-10 09:56:07
问题 I seem to be having an issue with getting events using KineticJS to fire on a Kinetic.Line with a stroke of 1 or less. I thought adding all the lines to a group, and then attaching the event to a group would suffice, but it did not work. I have simplified the code from what I'm trying to accomplish to shorten the post: var gridOffsetX = 45, gridHeight = 200, gridWidth = 760, rowHeight = gridHeight / 4; var stage, baseLayer = new Kinetic.Layer(); // debug message var debugText = new Kinetic

KineticJS: right click fires click

由 扶醉桌前 提交于 2019-12-10 09:43:50
问题 I'm using Kineticjs and I'm defining a rect event like this this.rect.on('click tap', function(){ foo(); }); The event is fired when I left-click, but also when right-click. How can I avoid to fire this event with right-click? (I can't disabled the right-click in the page because I want to open a context menu if I rightclick over the rect) Thank you 回答1: You need to filter out right mouse click this.rect.on('click tap', function(e){ // 1:left, 2: middle, 3: right, for IE 8, e.button != 2 if

How to make selection box in Canvas to select any object it touches not only objects it embraces?

由 北城以北 提交于 2019-12-09 19:25:54
问题 There is a great tutorial Selecting Multiple Objects with KineticJS that teaches you how to create a selection box in HTML Canvas in order to select multiple objects, but the author Michelle Higgins wrote his code to select object that embraced by the selection box. The following JavaScript code expresses the algorithm: var pos = rectSel.getAbsolutePosition(); //get the extents of the selection box var selRecXStart = parseInt(pos.x); var selRecXEnd = parseInt(pos.x) + parseInt(rectSel.attrs

kineticjs drag and drop image from dom into canvas

由 孤街浪徒 提交于 2019-12-09 11:44:46
问题 I have an image loaded on the dom already, and I want to be able to drag that image into a canvas and drop it into the canvas and create a kineticjs object out of it. I don't know how to make the image draggable, and I don't know how to make the canvas react to drag and drop events that already exist on the dom. Can someone show me how to do this? Most of the tutorials show how to drag and drop from within the canvas, or the file system, I'm looking how to drag from the DOM to the canvas.

coffeescript Class

由 纵饮孤独 提交于 2019-12-09 01:35:01
问题 When I replace new Gallery with new Kinetic.Stage the code works properly When I work with the dirived class it does not work. Why is the kind of deriving Gallery from Kinetic.Stage wrong ? width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0 height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0 class Gallery extends Kinetic.Stage constructor: (config) -> super(config) window.onload = -> list_of

Transform (Move/Scale/Rotate) shapes with KineticJS

由 我与影子孤独终老i 提交于 2019-12-08 23:32:30
问题 I'm trying to build a transform manager for KineticJS that would build a bounding box and allow users to scale, move, and rotate an image on their canvas. I'm getting tripped up with the logic for the anchor points. http://jsfiddle.net/mharrisn/whK2M/ I just want to allow a user to scale their image proportionally from any corner, and also rotate as the hold-drag an anchor point. Can anyone help point me in the right direction? Thank you! 回答1: Here is a proof of concept of a rotational

Jquery Image Lens - Kinetic JS image id

由 人走茶凉 提交于 2019-12-08 16:44:33
I am trying to use jquery image lens on Kinetic JS canvas http://jsfiddle.net/user373721/7f8qM/15/ . The challenge I have is how to find the id of the image in the canvas, I tried: myImage.onload = function () { var yoda = new Kinetic.Image({ x: 0, y: 0, image: myImage, width: 400, height: 400, id: 'thumb' }); layer.add(yoda); layer.draw(); }; myImage.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'; $('#thumb').imageLens({ lensSize: 200 }); Had no luck, I would appreciate your suggestions, thanks in advance. It is not posible to use kineticjs and imageLens as you are trying.

How to make an eraser with kineticjs 5.1.0 acting on multi-layer?

由 拥有回忆 提交于 2019-12-08 13:48:00
问题 I want to make an eraser with kineticjs, but i have some problem. The eraser need to be efficient on multiple layer (layerA, layerB in my code) and with a simple button or some check box I can choose if the eraser will work on the first or second layer, and why not on all of them. I also need to keep them draggable. her is a jsfiddle that show what I've explained: http://jsfiddle.net/junkees/jA2V8/2/ var stage = new Kinetic.Stage({ container: 'container', width: 400, height: 500 }); var

How to let a user delete a group of objects in kineticjs?

由 天大地大妈咪最大 提交于 2019-12-08 12:46:16
问题 I have various draggable groups on a kinetic canvas. I need to let a user delete some of these groups. The first problem is how to actually delete the group (with all its parts) from the canvas. The second is what kind of UI interaction to use to allow the user to do so. I was thinking to bind dragend, check some condition (eg the position of the object, or some modal variable), and delete the group if the condition is met. Any better suggestions? 回答1: Hi for removing all the elemnts of a
订阅 kineticjs