kineticjs

paint application with kinetic js

由 。_饼干妹妹 提交于 2019-12-08 11:56:25
问题 I have made a drag and drop application in HTML5 canvas with kinetic js. Can we also add the paint brush functionality to the same canvas using kinetic js? If yes, please share the link for one such application, and also the code, if possible. 回答1: You can use mouse events to let the user create a sketch on the canvas. Here's how to let the user create a Kinetic polyline. On mousedown: Set a mousedown flag to true (indicating that the user is sketching) Create a new Kinetic Line object On

KineticJS - Get the width/height of a Path Shape?

由 送分小仙女□ 提交于 2019-12-08 11:52:09
问题 this is a big issue for me at the moment... I'm rendering a world map via Path shapes... problem is the Path Shape does not offer width or height, so caching or other simple operations become really hard to do. e.g. what x/y height/width to I give to path.toImage ? Any idea how I could get around this problem? 回答1: If the world map path is made up of a series of lines (as it often is), you can get the bounding box of the path by looking for the minX/minY and maxX/maxY coordinates in your path

How to animate object on curve path in Kineticjs

由 让人想犯罪 __ 提交于 2019-12-08 10:37:51
问题 I would like to create a path as some curve, probably quad curve. It can be done similarly to http://www.html5canvastutorials.com/labs/html5-canvas-modify-curves-with-anchor-points-using-kineticjs/ Then I am able to create image object. However, I want to animate it along the created path (move it from start point to end point of the curve). I can use Javascript+Canvas+KineticJS(v 4.7.1). Is there any way, how to do it? I can't find any example which solves this. 回答1: Demo: http://jsfiddle

How to get canvas in fullscreen-mode with KineticJS

由 隐身守侯 提交于 2019-12-08 07:00:53
问题 I'm using KineticJS-Library to work with my canvas-Element. I need one big canvas-Element with a size of 1920x1080px, nothing else is displayed on my site. If the browser's resolution is not high enough, I want to scale down the whole canvas-Element: The aspect ratio always has to stay at 16:9, and the size of the element should be as big as possible (black borders, if the browser's ratio is different). However, the coordinate-space has to stay at 1920x1080 - I don't want to calculate with

Kineticjs: Rotate an Image with a two Finger Touch Gesture?

由 筅森魡賤 提交于 2019-12-08 06:28:22
问题 I want to use Kineticjs on a mobile device to rotate an image with a two finger rotation gesture. Displaying an image is described here. Which is basically this: <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script> <script defer="defer"> var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layer = new Kinetic.Layer(); var imageObj = new Image(); imageObj.onload = function() { var yoda = new Kinetic.Image({ x: 200, y:

KineticJS dynamically change the position of an object when other object is moved

由 雨燕双飞 提交于 2019-12-08 04:00:24
问题 I have a vertical and a horizontal lines and a circle on my stage, trying to keep the circle centered on the corssoing of the two lines when I move either line, here is my script that does not work: var cy = 512; var cx = 512; var gy = 0; var gx = 0; var stage1 = new Kinetic.Stage({ container: 'container', width: 1024, height: 1024 }); var layer = new Kinetic.Layer(); var circle = new Kinetic.Layer(); var circle1 = new Kinetic.Circle({ x: cx + gx, y: cy + gy, radius: 140, stroke: '#00ffff',

Resizing the images while keeping proportion using kinetic js canvas

由 ≯℡__Kan透↙ 提交于 2019-12-07 16:36:31
I'm using this in my app: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/ have use anchors for resizing the image .. What I want is to resize the image and keep its ratio maintained. I don't want it to stretch I'm able to achieve that using this peace of code.:.. if(width) { image.setSize(width); } But this is screwing up the anchors .. Anyone ever tried something like this.. I know this is a horribly old post but I needed to implement this exact thing and found the accepted answer is quite flawed - the left two drag handles move the entire image

KineticJS Drag event is preventing Double-click event from firing

由 Deadly 提交于 2019-12-07 15:46:29
问题 I have a node in KineticJs that has both a drag handler and double-click handler on it. When a user attempts to double-click on the object and moves slightly during the initial click, the drag handler intercepts what would be the double-click, breaking the experience. I have googled this extensively and have tried many solutions to no avail. This issue is captured in the link below but no update has been made to kinetic. https://github.com/ericdrowell/KineticJS/issues/243 Example Code: shape

How does Blur Filter work in HTML5 Kinetic.Filters.Blur

由 六眼飞鱼酱① 提交于 2019-12-07 06:56:34
问题 How I can use blur filter in HTML5? I find this: Kinetic.Filters.Blur(imageData, config ) and Parameters: imageData {Object} config {Object} config.radius {Integer} Explain to me with an example that how I can do this. 回答1: var image = new Kinetic.Image({ x: 10, y: 10, image: imageObj, filter: Kinetic.Filters.Blur, filterRadius: 20 }); Checkout this tutorial: http://www.html5canvastutorials.com/kineticjs/html5-canvas-tween-blur-filter-with-kineticjs/ 来源： https://stackoverflow.com/questions

Allowing the user to type text in a HTML5 Canvas game

由 我与影子孤独终老i 提交于 2019-12-06 22:11:39
问题 I'm trying to write my first HTML5 game using a combination of Canvas and the excellent KineticJS library and I've hit a bit of a wall early on. What I want to do is ask the user to enter their name in a box in the game. Having done some research, i can't see any way of doing this outside getting a floating HTML element over that part of the canvas I'm using. Is this correct? Having grown up on a lot of Flash and web games, I'm sure each time I have to input a name or save file name, it's
订阅 kineticjs