kineticjs

问题 I am using the following to get the mouse position: var coordinate = 0; ............ canvas1.addEventListener('mousemove', function (evt) { var mousePos = getMousePos(canvas1, evt); var nY = Math.round(mousePos.y); var nX = Math.round(mousePos.x); coordinate = "x=" + nX + ", y=" + nY; $('#pValue').val(coordinate); }, false); It works great if I display the value in a text field; however I could not update a text layer: dlayerA1Text = new Kinetic.Layer(); var simpleTextRight = new Kinetic.Text

问题 I am using KineticJS to perform HTML Canvas animations. Animations work perfectly on all desktop browsers, and non retina iDevices (including iPad mini). However, from a retina device (browser or in-app webview using appcelerator) these animations are very sluggish. I have seen similar issues with canvas animations on retina display, but have not found any true solution. My Stage constructor is 1024w x 768h. All images are preloaded. And animations are constructed using the preloader's

问题 my function draw an image, and another image on another layer with Kinetic.js but i want to crop the second image which is named smsTopBg_image window.onload = function() { //INITIALISATION var stage = new Kinetic.Stage({ container: "iPhone", width: 480, height: 720 }); //LAYERS var background_layer = new Kinetic.Layer(); var sms_layer = new Kinetic.Layer(); var text_layer = new Kinetic.Layer(); //ELEMENTS var iPhoneBg = new Image(); iPhoneBg.onload = function() { var iPhoneBg_image = new

问题 my function draw an image, and another image on another layer with Kinetic.js but i want to crop the second image which is named smsTopBg_image window.onload = function() { //INITIALISATION var stage = new Kinetic.Stage({ container: "iPhone", width: 480, height: 720 }); //LAYERS var background_layer = new Kinetic.Layer(); var sms_layer = new Kinetic.Layer(); var text_layer = new Kinetic.Layer(); //ELEMENTS var iPhoneBg = new Image(); iPhoneBg.onload = function() { var iPhoneBg_image = new

问题 It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 7 years ago . I just want to make 200 clickable nodes (capture mouse events) which are connected by lines. Each node has some data associated with them in form of live data streams ( for simplicity assume CSVs) and clicking on

问题 Is there a way one could zoom and pan on a canvas using KineticJS? I found this library kineticjs-viewport, but just wondering if there is any other way of achieving this because this library seems to be using so many extra libraries and am not sure which ones are absolutely necessary to get the job done. Alternatively, I am even open to the idea of drawing a rectangle around the region of interest and zooming into that one particular area. Any ideas on how to achieve this? A JSFiddle example

问题 I'm using KinectJS to draw lines based on mouse movement. When a user holds down the mouse button, I want it to be the 'start' point of the line, and when the user release, it will be the 'end' of the line, but as they are holding the mouse down I want to be able to dynamically redraw the line as my mouse moves. Is this possible? 回答1: Yes, its possible. Basically, you has to redraw your layer during onMouseMove event. You'll need a flag to control when the line is moving or not. When the

问题 I want to add Textbox or editable element to give the user the option to edit the text. This is my current code: var text = new Kinetic.Text({ text: "Sample Text", ---> i want to edit this text x: 50, y: 10, fill: "transparent", fontSize: 10, fontFamily: "Helvetica Neue", textFill: "#000", align: "center", verticalAlign: "middle", name:'TEXT' }); 回答1: At the moment there does not seem to be any way to create editable text with Kinetic JS (see several threads about this at stackoverflow), some

问题 1) Is there any digest complete event which I can use to update my canvas. I have an angular app which has view for different properties of the canvas object. Whenever I change the property, once the digest is complete, If I can get the digest complete event I can update the canvas(using kineticJs) to redraw the chart with latest properties. Currently i am calling a method from the view 2) I am just using views and routing it to a new view whenever an object settings is opened. In this case

问题 I would like to resize, stretch an HTML5 canvas in a way that the canvas act like an IMG element: set width-height by pixel, percent... I wonder if is there any way to convert/export an HTML5 canvas to an IMG element, or any way that can make this possible directly on the canvas. I'm using KineticJS library, for details. Please help! 回答1: First, give your canvas an id (e.g. example ). Then, using plain JavaScript you can create an image based on that canvas and style it: var canvas = document