Search Results

Search found 6 results on 1 pages for 'kineticjs'.

Page 1/1 | 1 

• Animating and moving a draggable shape in KineticJS's dragend event

  - by user3712941

  I would like to animate moving a draggable shape to another position after it has been dragged in KineticJS. I would like to animate the movement of the shape over a period of time (for example, over 1 second). For example, I create a draggable shape and save its initial xy coordinates. I register a "dragend" event on this shape. Then, I drag the shape to a new position. When I release the drag, the dragend event is called. In that event function, I want to animate/ease the shape back to its original position. See my JSFiddle for a complete example: DragSample. (function () { //create variables at global scope var layer; var stage; var triangle; var triangleLastX = 190; var triangleLastY = 120; var tween; function initTween() { tween = new Kinetic.Tween({ node: triangle, duration: 1, easing: Kinetic.Easings.EaseInOut, x: 400, y: 200, }); } this.init = function () { layer = new Kinetic.Layer(); stage = new Kinetic.Stage({ container: 'container', width: 800, height: 600 }); triangle = new Kinetic.RegularPolygon({ x: 190, y: 120, sides: 3, radius: 80, fill: '#00D2FF', stroke: 'black', strokeWidth: 4, draggable: true }); triangle.on('dragstart', function () { triangleLastX = triangle.attrs.x; triangleLastY = triangle.attrs.y; }); triangle.on('dragend', function () { tween.play(); stage.draw(); }); layer.add(triangle); stage.add(layer); initTween (); } window.onload = init(); })(); I have tried doing this several ways. The last way I attempted to do this was using Kinetic's Tween(), however, when I play this Tween from the dragend event handler function, it moves the shape back to its original position immediately (i.e. the position when the drag started), then applies the Tween. Is there any way to achieve animating the movement of a draggable shape to its original position (or any other position for that matter) in dragend using KineticJS?

  Read the article

• Working with Multiple Layers - KineticJS

  - by Bruno Sampaio

  I'm using KineticJS 4.0.5 and I'm currently trying to draw the contents of several layers but only the last one added to stage is drawn... If I understood the documentation correctly this should be possible, otherwise why would we need a layer? I have three different layers: a background layer with just a Kinectic.Rect object; a elements layer with several types of shapes; and a top layer with elements I want to be always on top of everything. I populate those layers inside a draw function I have inside a object I created, this object also has a shape attribute which refers to the background and a contents attribute with the elements to add to the elements layer. My code for the draw function is the following: this.draw = function() { var stage = E.game.stage, layers = E.game.layers; stage.clear(); // Add Background this.shape.setSize(stage.getWidth(), stage.getHeight()); layers.background.add(this.shape); // Iterate over contents for(var i = 0; i < this.contents.length; i++) { layers.elements.add(this.contents[i].shape); } // Draw Everything stage.add(layers.background); stage.add(layers.elements); stage.add(layers.top); // This one is currently empty stage.draw(); } After running this function, only layers.top is drawn in the canvas, and if I comment the line where it is added only layers.elements is drawn. However the stage has 3 childrens (I checked it with inspect element on chrome) and in the documentation it says the draw function draws all layers... Am I doing something wrong here? Or it isn't possible? And if it's not possible why would I need a layer and a stage? Wouldn't one be enough? Thank you in advance. Edit: I was able to solve the problem, I was applying a white background color with css to the canvas element and since each layer creates a new canvas element above the others I could only see the contents for the top most layer (in this case just white). However, I still have a problem related with multiple layers that I didn't have before with just one layer. When I use the clear function on the stage it should clear the layers right? But instead the layers remain exactly the same, even if I try to call clear on each individual layer they won't change... I'm also using the stage draw function after clearing them but still no changes at all... The only solution I found until now was by removing the layer from the stage and adding it again :s Is there a better way to reset the layers contents? Thank you again and sorry for the confusion with the first question.

  Read the article

• Greasemonkey script, that creates Kineticjs drag and drop canvas over every website

  - by Michael Moeller

  I'd like to put a drag and drop canvas over every website I visit in Firefox. My Greasemonkey script puts a drag and drop canvas under every page: kinetic.user.js: // ==UserScript== // @name kineticjs_example // @description Canvas Drag and Drop // @include * // @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js // @require http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js // ==/UserScript== var div = document.createElement( 'div' ); with( div ) { setAttribute( 'id', 'container' ); } // append at end document.getElementsByTagName( 'body' )[ 0 ].appendChild( div ); var stage = new Kinetic.Stage({ container: 'container', width: 1000, height: 1000 }); var layer = new Kinetic.Layer(); var rectX = stage.getWidth() / 2 - 50; var rectY = stage.getHeight() / 2 - 25; var box = new Kinetic.Rect({ x: rectX, y: rectY, width: 100, height: 50, fill: '#00D2FF', stroke: 'black', strokeWidth: 4, draggable: true }); // add cursor styling box.on('mouseover', function() { document.body.style.cursor = 'pointer'; }); box.on('mouseout', function() { document.body.style.cursor = 'default'; }); layer.add(box); stage.add(layer); How can I drag and drop this shape over the entire website?

  Read the article

• getting the stage from a container in kineticjs

  - by seinecle

  I have this stage associated to a container: html: <div id="container"> script 1: var stageInFirstScript = new Kinetic.Stage({ container: document.getElementById('container'), width: this.SKETCH_WIDTH, height: this.SKETCH_HEIGTH }); In a second script, I need to manipulate the shapes on the stage I just created. Is it possible to retrieve stageInFirstScript with something like this? script 2: var stageInSecondScript = document.getElementById('container').RetrieveExistingStage(); //now I have retrieved stageInFirstScript //I can add shapes to it, etc.... Any help or alternative solution would be appreciated!

  Read the article

• KineticJS issue with repeatable mouse event

  - by nuclearpeace

  I have noob issue here (i obviously missing something). I simplified it from my bigger application: When i click blue rectangle, i add another layer to the stage that includes red rectangle (clickable), when i clik this red rectangle it removes second layer with red rect. Problem: When i click blue rect second time, nothing happens :( i.e. app works only once, and i need to add/remove second layer(with red rect) repeatedly. What's wrong? :) You can see it here, Fiddle http://jsfiddle.net/mAX8r/ Code: <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } canvas { border: 1px solid #9C9898; } </style> <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js"> </script> <script> window.onload = function() { var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layerBlue = new Kinetic.Layer(); var layerRed = new Kinetic.Layer(); var rectBlue = new Kinetic.Rect({ x: 100, y: 75, width: 100, height: 50, fill: 'blue', stroke: 'black', strokeWidth: 4 }); var rectRed = new Kinetic.Rect({ x: 300, y: 75, width: 100, height: 50, fill: 'red', stroke: 'black', strokeWidth: 4 }); // mouse events rectBlue.on('click', function() { stage.add(layerRed); stage.draw(); }); rectRed.on('click', function() { layerRed.remove(); stage.draw(); }); // add the shape to the layer layerBlue.add(rectBlue); layerRed.add(rectRed); // add the layer to the stage stage.add(layerBlue); }; </script> </head> <body> <div id="container"></div> </body> </html>

  Read the article

• CodePlex Daily Summary for Sunday, October 07, 2012

  CodePlex Daily Summary for Sunday, October 07, 2012Popular ReleasesJson.NET: Json.NET 4.5 Release 10: New feature - Added Portable build to NuGet package New feature - Added GetValue and TryGetValue with StringComparison to JObject Change - Improved duplicate object reference id error message Fix - Fixed error when comparing empty JObjects Fix - Fixed SecAnnotate warnings Fix - Fixed error when comparing DateTime JValue with a DateTimeOffset JValue Fix - Fixed serializer sometimes not using DateParseHandling setting Fix - Fixed error in JsonWriter.WriteToken when writing a DateT...Readable Passphrase Generator: KeePass Plugin 0.7.2: Changes: Tested against KeePass 2.20.1 Tested under Ubuntu 12.10 (and KeePass 2.20) Added GenerateAsUtf8 method returning the encrypted passphrase as a UTF8 byte array.VidCoder: 1.4.2 Beta: Added Modulus dropdown to Loose anamorphic choice. Fixed a problem where the incorrect scaling would be chosen and pick the wrong aspect ratio. Fixed issue where old window objects would stick around and continue to respond to property change events We now clear locked width/height values when switching to loose or strict anamorphic. Fixed problems with Custom Anamorphic and display width specification. Fixed text in number box incorrectly being shown in gray in some circumstances.patterns & practices: Prism: Prism for .NET 4.5: This is a release does not include any functionality changes over Prism 4.1 Desktop. These assemblies target .NET 4.5. These assemblies also were compiled against updated dependencies: Unity 3.0 and Common Service Locator (Portable Class Library).Configuration Manager 2012 Automation: Beta Code (v0.1): Beta codeWinRT XAML Toolkit: WinRT XAML Toolkit - 1.3.2: WinRT XAML Toolkit based on the Windows 8 RTM SDK. Download the latest source from the SOURCE CODE page. For compiled version use NuGet. You can add it to your project in Visual Studio by going to View/Other Windows/Package Manager Console and entering: PM> Install-Package winrtxamltoolkit Features AsyncUI extensions Controls and control extensions Converters Debugging helpers Imaging IO helpers VisualTree helpers Samples Recent changes NOTE: Namespace changes DebugConsol...Snoop, the WPF Spy Utility: Snoop 2.8.0: Snoop 2.8.0Announcing Snoop 2.8.0! It's been exactly six months since the last release, and this one has a bunch of goodies in it. In particular, there is now a PowerShell scripting tab, compliments of Bailey Ling. With this tab, the possibilities are limitless. It basically lets you automate/script the application that you are Snooping. Bailey has a couple blog posts (one and two) on his tab already, and I am sure more is to come. Please note that if you do not have PowerShell installed, y....NET Micro Framework: .NET MF 4.3 (Beta): This is the 4.3 Beta version of the .NET Micro Framework. Feature List for v4.3 Support for Visual Studio 2012 (including the Windows Desktop Express version) All v4.2 QFEs features and bug fixes (PWM enhancements, lwIP and network driver reliability improvements, Analog Output, WinUSB and latest GCC support) Improved diagnostic information for deployment Decreased boot time Bug fixes Work Item 1736 - Create link for MFDeploy under start menu Work Item 1504 - Customizing lwIP o...MCEBuddy 2.x: MCEBuddy 2.3.1: 2.3.1All new Remote Client Server architecture. Reccomended Download. The Remote Client Installation is OPTIONAL, you can extract the files from the zip archive into a local folder and run MCEBuddy.GUI directly. 2.2.15 was the last standalone release. Changelog for 2.3.1 (32bit and 64bit) 1. All remote MCEBuddy Client Server architecture (GUI runs remotely/independently from engine now) 2. Fixed bug in Audio Offset 3. Added support for remote MediaInfo (right click on file in queue to get ...D3 Loot Tracker: 1.5: Support for session upload to website. Support for theme change through general settings. Time played counter will now also display a count for days. Tome of secrets are no longer logged as items.NTCPMSG: V1.2.0.0: Allocate an identify cableid for each single connection cable. * Server can asend to specified cableid directly.Team Foundation Server Word Add-in: Version 1.0.12.0622: Welcome to the Visual Studio Team Foundation Server Word Add-in Supported Environments Microsoft Office Word 2007 and 2010 X86 (32-bit) Team Foundation Server 2010 Object Model TFS 2010, 2012 and TFS Service supported, using TFS OM / Explorer 2010. Quality-Bar Details Tool has been reviewed by Visual Studio ALM Rangers Tool has been through an independent technical and quality review All critical bugs have been resolved Known Issues / Bugs WI#43553 - The Acceptance criteria is not pu...RMDdownloader: Test Release: RMDdownloader is a tiny application designed to locate and download the the desktops submitted by the http://ratemydesktop.org userbase. It providers a search string function and other options. RMDdownloader also allows you to automatically set the downloaded images as desktop wallpapers and adjust the windows aero theme accordingly. Upcoming features - The ability to upload your current desktop screenshot on http://ratemydesktop.org - Detection of skins/themes used in user submitted deskt...Viva Music Player: Viva Music Player v0.6.7: Initial release.Korean String Extension for .NET: ?? ??? ??? ????(v0.2.3.0): ? ?? ?? ?? ???? - string.KExtract() ?? ???? - string.AppendJosa(...) AppendJosa(...)? ?? ???? KAppendJosa(...)? ??? ?????UMD????? - PC?: UMDEditor?????V2.7: ??：http://jianyun.org/archives/948.html =============================================================================== UMD??? ???? =============================================================================== 2.7.0 (2012-10-3) ???????“UMD???.exe”??“UMDEditor.exe” ?????????；????????，??????。??????，????！ ??64????，??????????????bug ?????????????，???? ???????????????? ???????????????，??????????bug ------------------------------------------------------- ?? reg.bat ????????????。 ????，??????txt/u...Untangler: Untangler 1.0.0: Add a missing file from first releaseDirectX Tool Kit: October 2012: October 2, 2012 Added ScreenGrab module Added CreateGeoSphere for drawing a geodesic sphere Put DDSTextureLoader and WICTextureLoader into the DirectX C++ namespace Renamed project files for better naming consistency Updated WICTextureLoader for Windows 8 96bpp floating-point formats Win32 desktop projects updated to use Windows Vista (0x0600) rather than Windows 7 (0x0601) APIs Tweaked SpriteBatch.cpp to workaround ARM NEON compiler codegen bugCRM 2011 Visual Ribbon Editor: Visual Ribbon Editor (1.3.1002.3): Visual Ribbon Editor 1.3.1002.3 What's New: Multi-language support for Labels/Tooltips for custom buttons and groups Support for base language other than English (1033) Connect dialog will not require organization name for ADFS / IFD connections Automatic creation of missing labels for all provisioned languages Minor connection issues fixed Notes: Before saving the ribbon to CRM server, editor will check Ribbon XML for any missing <Title> elements inside existing <LocLabel> elements...SubExtractor: Release 1029: Feature: Added option to make i and ¡ characters movie-specific for improved OCR on Spanish subs (Special Characters tab in Options) Feature: Allow switch to Word Spacing dialog directly from Spell Check dialog Fix: Added more default word spacings for accented characters Fix: Changed Word Spacing dialog to show all OCR'd characters in current sub Fix: Removed application focus grab during OCR Fix: Tightened HD subs fuzzy logic to reduce false matches in small characters Fix: Improved Arrow k...New ProjectsAptech.eProject.Batch59B - Online Bus Ticket Reseveration System: This is an eProject of SOFTECH - APTECHAptech.eProject.Batch59B - Online Floral Delivery: This is an ePorject of SOFTECH - APTECHDeploy File Generator: Deploy File Generator demonstrates an automated method for importing files into a Visual Studio project in such a way that they can be easily deployed.DNX - Dot Net eXtensions: Collections of extensions to add functionalities at the .NET Framework.EFMock: Database in-memory simulator around Entity Framework for unit test purposeEnergy Communications Solution: A networked grid, with advanced analytics, that consolidates data into an intelligent, instrumented and interconnected single platform for actionable insight.Essential Code: PL: Niezbedny kod EN: Essential CodeExtended WPF File Previewer Control: A WPF user control that implements extended file previewing. The project includes source for the control as well as for a "demo" project.IndieDateTime: IndieDateTime is a simple and easy to use wrapper around .NetFramework DateTime class that has it's own timer which is interdependent from user system. Being inJDynamic: JDynamic : a tools transfer json to .NET Dynamic OjbectKineticJS Type interface for TypeScript: This project provides a type inteface for the http://www.kineticjs.com/ library: kinetic.d.ts. OleExcel: This is to learn OLE for ExcelPortable IoC: Portable IOC is a tiny thread-safe Inversion of Control container that is portable between Windows Phone, Windows Store (Windows 8), Silverlight, and .NET apps.SpeedPOS: Solucion rapida y sencilla para PyMES que necesitan implementar puntos de venta.UnknownApplication: TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTUrl 2 Embed library: Url 2 Embed library, It's a library to convert URLs pages into embeddable content (Videos).WFLite: ??Asp.net WebPages 2?????????? 。

  Read the article

1