kineticjs

问题 I'm trying to build a web app using KineticJS, I basically have a function which runs on load which adds an image to a canvas (stage in KineticJS). Each time the function runs though, it is adding the image again underneath the existing one, where as I need it to replace the one that is currently on the stage. I know it's something to do with me creating a new image object each time the function is loaded, but I'm confused as to why it's positioning is different (underneath). I have simulated

问题 background: i am developing a real-time multiplayer html5 canvas game using kineticjs which primarily will be played on MOBILE PHONE BROWSERS. There's a lot going on in the game such as socket communication with the server every second, redrawing and animations using kineticjs based on the server response and all this on top of a heavy graphic interface. The game functions well in desktop browsers however is SLUGGISH on mobilephones. So, I need to find all the ways in which the code can be

问题 I am new in Javascript and Kinetics and I need to implement a function to draw a freehandline with Kinetics.Js. I found this example but works only with start and endpoint. I will draw in realtime by following the mousepointer...I do not know how to change the functions or push some new coordinates... Do you have an idea? var moving = false; function createLine() { line = new Kinetic.Line({ points: [0, 0, 0, 0], stroke: "red", strokeWidth: 2, id: 'line', name: 'line', draggable: true });

问题 I am new in Javascript and Kinetics and I need to implement a function to draw a freehandline with Kinetics.Js. I found this example but works only with start and endpoint. I will draw in realtime by following the mousepointer...I do not know how to change the functions or push some new coordinates... Do you have an idea? var moving = false; function createLine() { line = new Kinetic.Line({ points: [0, 0, 0, 0], stroke: "red", strokeWidth: 2, id: 'line', name: 'line', draggable: true });

问题 I have gone through few articles for detecting hit only on the perimeter of circle or rectangle. Some workarounds for implementing it is done by doing maths on click event of the shape or creating groups. That's fine. But is there any way we can implement this by creating a custom draw function that just draws the perimeter of a rectangle, circle (stroke only). Any help would be much appreciated. 回答1: This is really simple if you set your hit function. Here's a jsfiddle: http://jsfiddle.net

问题 I am trying to add a click event to an image ( Kinetic.Image ) I am adding to a KineticJS stage. When I use a simple hierarchy, as shown below (Test 0) the event can be successfully triggered. However when adding the image in a more complex hierarchy (Test 1) the event is not triggered. I have created a Fiddle that demonstrates both hierarchy situations. // The canvas container for the stage var container = $("#container").html(""); // Create the stage var stage = new Kinetic.Stage({

问题 Check out my html5 based clipping constraint on http://shedlimited.debrucellc.com/test3/canvaskinclip.html (messing with jsfiddle on http://jsfiddle.net/aqaP7/4/) So, in html5 I can easily draw a shaped boundary like the following: context.beginPath(); context.moveTo(5, 5); context.lineTo(34, 202); context.lineTo(2, 405); context.lineTo(212, 385); context.lineTo(425, 405); context.lineTo(400, 202); context.lineTo(415, 10); context.lineTo(212, 25); context.clip(); In kinetic.js though, all I

问题 How can I use globalCompositeOperation with KineticJS? I've seen a couple of examples where a custom function is created but they all seem out of date and don't work anymore. I'm trying to create an app where a shape (like a circle) can be moved around the canvas and reveal the image below it and then locked into place to create the image mask. It seems that using a composite would be better than trying to use a fillImagePattern. Any ideas would be greatly appreciated. Thanks, - Chris 回答1:

问题 Definining KineticJS Stage I go like this: var stage = new Kinetic.Stage({ container: 'container', width: 320, height: 480 }); So width and height of stage are fixed size. How to stretch it to fit on phone screen if resolution is different? 回答1: Well, this is really a javascript question. You want to make the size of the stage same as the window size. This worked for me on my android project: var stage = new Kinetic.Stage({ container: 'container', width: window.innerWidth, height: window

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 5 years ago . I am working a project where we need to warp image Basically, I want to take this image: And turn it into this: Please note : text also warped. I honestly have no clue how to go about it so any help would be greatly appreciated! Here is demo what exactly i want IMAGELINK please upload above image on link and see