kineticjs

Dragging collisions

由 独自空忆成欢 提交于 2019-11-30 09:58:38
问题 I am pretty new to both CANVAS and Kineticjs but I feel what I am attemping should be much easier then I am making it out to be. Basically this is what I have so far: The code I am attempting to use is from kineticjs Stop drag to a shape when overlaps with another solution but was unable to get it to work. Please check the live jsfiddle code var isRectCollide = function(target, box) { if (target.x - target.width >= box.x + box.width && target.y - target.height >= box.y + box.height && target

Transform (Move/Scale/Rotate) shapes with KineticJS

由 淺唱寂寞╮ 提交于 2019-11-30 09:48:43
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! Here is a proof of concept of a rotational control I've made: http://codepen.io/ArtemGr/pen/ociAD While the control is dragged around, the dragBoundFunc is

How to create Undo-Redo in kineticjs?

由 ≡放荡痞女 提交于 2019-11-30 09:33:06
问题 Is there any simple way how to create undo redo function in Kineticjs ? I have found a Undo Manager for HTML 5 in https://github.com/ArthurClemens/Javascript-Undo-Manager, but I don't know how to put in Kineticjs, please help me. thank you. 回答1: I was able to implement a simple solution based on a post by Chtiwi Malek at CodiCode. I also used some of the code from this problem as an example to draw rectangles, so credits go to them and Chtiwi. The only difference in my solution is I used

Android 4+ html5 canvas not redrawing

由 六眼飞鱼酱① 提交于 2019-11-30 05:18:34
问题 I am currently developing an android application using phonegap. I have an html5 canvas that I am drawing and animating objects on. It works great on android 2.3, but on android 4+ it is not redrawing the canvas. I tried using both kinetic.js and easel.js/tween.js for my animations and the problem with not clearing the canvas occurred for both of these libraries. I experienced some success showing and hiding a div over the canvas but it does not work all the time. I can only assume that this

KonvaJS: How to connect two shapes with an arrow?

由 佐手、 提交于 2019-11-30 03:56:39
问题 I would like to use Konvajs to do below tasks: draw two rectangle groups on canvas. Each group contains a rectangle, text, and a circle When I use the mouse to drag from the circle, it draws an arrow while dragging. When I drop the arrow into another group, it stops drawing and connects the two groups edge to edge Something like this: Are there any native methods that support connections between shapes? Could anyone show me some examples please? 回答1: I have connected Konva.Circles. But the

HTML5 Canvas效率如何？

由 南楼画角 提交于 2019-11-30 00:25:07
js运行效率在提升 编程语言的效率是前提，js自然比不上native的C语言效率，所以Canvas效率无疑比不上原生的2D图形绘制，但是js效率的提升是有目共睹的，以js与as为例，基本操作（运算操作，集合操作，Map操作）已经超越ActionScript，尤其是Google Chrome浏览器与as拉开了不小的距离，甚至某些方面超过java。 Canvas绘制效率不低 Canvas没有dom操作，只是简单的2D绘制，所以效率不低，Chrome浏览器下，每秒可绘制五万个基本图形元素（圆形，矩形或者线条），如果有阴影效果会慢很多，总的来说上万元素的绘制还是很轻松的 适合简单应用 因为简单，做一些像素处理，2D绘制，小游戏啥的还是很方便的，国际上有javascript 1k作品大赛（ http://js1k.com/ ），用1024字节的js代码，实现丰富的效果，基本上都用到canvas，所以在轻量小巧方面很有优势 附上SVG与Canvas的适用范围 复杂应用借助第三方开发包 对于复杂应用，需要自己来解决无效区域，局部刷新，交互选中等功能，自己实现有些难度，这时候我建议借助第三方开发包 Canvas学习资料 http://www.w3.org/TR/2dcontext/ https://developer.mozilla.org/en/docs/HTML/Canvas http:/

Dragging collisions

由 情到浓时终转凉″ 提交于 2019-11-29 17:43:19
I am pretty new to both CANVAS and Kineticjs but I feel what I am attemping should be much easier then I am making it out to be. Basically this is what I have so far: The code I am attempting to use is from kineticjs Stop drag to a shape when overlaps with another solution but was unable to get it to work. Please check the live jsfiddle code var isRectCollide = function(target, box) { if (target.x - target.width >= box.x + box.width && target.y - target.height >= box.y + box.height && target.x + target.width <= box.x + box.width && target.x + target.height <= box.y - box.height ) return false;

How to create Undo-Redo in kineticjs?

由 元气小坏坏 提交于 2019-11-29 16:09:35
Is there any simple way how to create undo redo function in Kineticjs ? I have found a Undo Manager for HTML 5 in https://github.com/ArthurClemens/Javascript-Undo-Manager , but I don't know how to put in Kineticjs, please help me. thank you. projeqht I was able to implement a simple solution based on a post by Chtiwi Malek at CodiCode . I also used some of the code from this problem as an example to draw rectangles, so credits go to them and Chtiwi. The only difference in my solution is I used toJSON() to store each layer state in an array instead of toDataURL() on the canvas. I think toJSON()

KineticJS - Drawing Lines with Mouse

由 馋奶兔 提交于 2019-11-29 11:03:20
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? 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 script initialize, this flag should be false. At onMouseDown, the line start should receive the current mouse

How can i stop all audio playing using Jquery

由 浪子不回头ぞ 提交于 2019-11-29 10:49:09
I'm updating a div in a page using jquery mobile in order to play some animations. The animations also play sound through use of document.createElement('audio'); My problem is, when I update the page to another animation, the old sound keeps playing. Sorry, this is my first question and if it seems like im not phrasing it properly I apologise. Here is my code.. Here is the code of the animation to be loaded into the #animation div <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <div id="container"></div> <script src="scripts/kinetic-v4.3.2.min
订阅 kineticjs