ericdrowell / kineticjs Goto Github PK

Old version (working with v3.10.5):

Kinetic.scaledImage = Kinetic.Image.extend({
  init: function(config) {
    this._super(config);
    return this.setScale(scale);
  }
});

New version (trying to make it work with v4.0.1):

Kinetic.scaledImage = function(config) {
  return this._initImage(config);
};
Kinetic.scaledImage.prototype = {
  _initImage: function(config) {
    this.shapeType = 'scaledImage';
    Kinetic.Image.call(this, config);
    return this.setScale(scale);
  }
};
Kinetic.Global.extend(Kinetic.scaledImage, Kinetic.Image);

Where it just throws a RangeError

Kinetic.Image.call(this, config);
// throws Uncaught RangeError: Maximum call stack size exceeded

I have quite a hierarchy for my canvas game, say:

Coin << Kinetic.droppableImage << Kinetic.scaledImage << Kinetic.Image

it's essential for me to get this to work.

if you drag and drop your stage or change X/Y Position manually and apply filter with events like click or mouse over, the image object will be drawn on other locations. Can somone tell me where do i have to loock at to clear that problem?

http://jsfiddle.net/T7gWx/

this is the example code, Apply FIlters doesnt work on JS Fiddle but you can test that code local

Regards

Transitions only seem to be supported at the layer level or below, but it would be useful for it to work for an entire Stage.

the project cites performance as one of it's major goals and yet it doesn't feel that fast ?

e.g. dragging shapes around in the following demo:

http://www.html5canvastutorials.com/labs/html5-canvas-shape-tango-with-kineticjs/

They tend to lag behind the cursor --- really for such a simple demo they should be glued to the cursor

If you press mouse down on bottom rect and let go on top rect the top rect will fire a click event:
http://jsfiddle.net/davonium/Mrk4b/

To me it's more reasonable it the click event either checks that it is completed on the same object as it startet or it is aborted on mouse/touch move.

Hi,

I noticed that when checking for a visibility of a Node, first all the parents are checked if they are all visible.

Wouldn't it be faster if this piece of code:

isVisible: function() {
    if(this.getParent() && !this.getParent().isVisible()) {
        return false;
    }
    return this.attrs.visible;
}

would be changed to:

isVisible: function() {
    if (this.attrs.visible && this.getParent() && !this.getParent().isVisible()) {
        return false;
    }
    return this.attrs.visible;
}

SVG image itself or in group with opacity will be drawn as if opacity is set to 1

How to re-create:
create stage, layer, group, image with svg
add image to group, group to layer, layer to stage
set group and/or image opacity to 0 or lower than 1
call stage/layer draw function

group functions "hide" and "show" do work as intended, it hides and shows the group with svg images.

Hi,

http://jsfiddle.net/msxuB/3/

When I changed the size of a Rect and then update the group dragbounds according to the size of the Rect, the go.drag.offset would become negative and the bounding check ( if(db.left !== undefined && newNodePos.x < db.left) ) would always evaluate to being within the bounds. I cant explain it very well sorry.

Please place a breakpoint 1577 and use the jsfiddle above.

Kinetic-v3.9.0.js

Starting from Line 1575
var pos = that.getUserPosition();
var dc = node.dragConstraint;
var db = node.dragBounds;
// default
var newNodePos = {
x: pos.x - go.drag.offset.x,
y: pos.y - go.drag.offset.y
};
// bounds overrides
if(db.left !== undefined && newNodePos.x < db.left) {
newNodePos.x = db.left;
}

Gerard
wildcatgerry

Hi

Full screen canvas can have so many different dimensions and ratio depending of the device.
For now (don't hesitate to correct me if I'm wrong), shapes positioning (x, y) and sizes (width, height) are specified in pixels.

I reckon it will makes sense and be very handy to be able to pass percentage values, than will be internally translated by Kinetic according to the Stage dimensions.

Hi guys,

When I try to set an integer value directly to a Kinetic.Text node via the setText() function, I get the error "Object 5 does not support split", however if I concatenate this with a blank string then it works fine. Could you update this so that it casts the input in the same way as console.log()?

Thanks!

handle(obj.parent);

in _handleEvents

It would be great if this could stop bubbling if it detects the evt object has had its bubbling cancelled using any of the usual DOM event bubbling cancelling techniques.

Hi Eric.
Thanks for your library, it's a pleasure to work with.

Unfortunately, I have no benchmark nor frame rate numbers to offer you yet.
I will investigate, but I would just like to let you know that I noticed sensible performance issues between 3.9.8 and 3.10.0.

With the exact same canvas elements (a couple of basic shapes), the result was smooth but now is quite laggy white testing into IOS Safari. May it have something to do with the recent changes made in event handling?

I tried creating jigsaw puzzle using kineticjs. Puzzle pieces is created by using Kinetic.Shape filled with image.

When i apply dragging to the shape, memory leaks (not sure where) occur and crashes the whole browser (Only happened in Mozilla Firefox).

Works perfectly in Chrome and had some frame loss on IE and Safari.

I've tried to reduce the puzzle pieces, but the problem is the same although it can survive longer before crashes.

Nothing happens when using setZIndex(number) on a layer.

v4.0.2 broke http://jsfiddle.net/BgAh7/6/
v4.0.2 fixed http://jsfiddle.net/BgAh7/7/ (fix proposed by David http://www.kineticjs.com/forum/viewtopic.php?f=8&t=1078)

Uncaught TypeError: Cannot call method 'getContext' of undefined since 3.10.3. Every forward version is working without problems ;) Everything is in a body.onload so i think it´s not cause of me

The "get metrics" test (n° 39) fails :

Uncaught Error: text width should be 407px

Tested under Chrome 16.0.912.75 and Firefox 11.0 (Linux)

var box = new Kinetic.Rect({
 x: i * 30,
 y: i * 18,
 fill: colors[ Math.floor(Math.random() * 6) ],
 stroke: "black",
 strokeWidth: 4,
 draggable: true,
 width: 100,
 height: 50
});

box.on("mouseover", function() {
    document.body.style.cursor = "pointer";
});

box.on("mouseout", function() {
    document.body.style.cursor = "default";
});

should be able to be reduced to

var box = new Kinetic.Rect({
            x: i * 30,
            y: i * 18,
            fill: colors[ Math.floor(Math.random() * 6) ],
            stroke: "black",
            strokeWidth: 4,
            draggable: true,
            width: 100,
            height: 50
 }).on("mouseover", function() {
       document.body.style.cursor = "pointer";
}).on("mouseout", function() {
      document.body.style.cursor = "default";
});

_bindContentEvents is slowing down FF (FireFox) dramatically. Is there a way to make it optional?

I was using code based off the image resize sample and got an error that Kinetic.GlobalObject was undefined. It was in the setSize function.

I changed it to this and the error went away and seems to work correctly. My app has some issues, but not sure if it's my code or the change I made.

 setSize: function() {
        var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
        this.setAttrs(size);
    },

Kinetic.Tween modifies the attrs object directly, rather than calling setAttrs. This may be for performance reasons, but the end result is that there is no way to be notified of changes caused by transitions except by the transition callback (which isn't always feasible or desired).

Events are fired only for the upper layer in case of intersecting shapes on multiple layers

See: http://jsfiddle.net/levram/s7Yvz/1/

Expected behavior

• If you click on the blue circle out of the intersection, 2 events are fired (see the console) -> correct
• If you click on the red circle out of the intersection, 3 events are fired -> correct
• If you click on the intersection of the circles, all 5 events are fired -> failed
  Actual behavior
• If you click on the intersection of the circles, only 2 events are fired

Hello

Here's my use case : add a setHighlight() methods to all Shapes.

Adding this method to the Kinetic.Shape.prototype has no effect on child classes like Kinetic.Polygon because of the way the inheritance is set up with the Kinetic.GlobalObject.extend method which does a copy once for all.

An example by John Resig that could fix this issue without bloating the code :
http://ejohn.org/blog/simple-javascript-inheritance/

The constructor for Kinetic.Image works fine if you don't set the Image variable; the drawFunc understands that an undefined image parameter shouldn't be drawn.

However, if you call setAttrs with a config object that contains the key image, but with the value set to undefined, then the setAttrs converts that undefined to {}, which breaks the drawFunc. There doesn't seem to be any way to "unset" the image of an Image variable (or more generally, reset any attribute to its default value).

Internet Explorer 10 has a new, iOS-incompatible API for touch events. It would be very helpful if handlers could be set on KineticJS nodes for them.

http://msdn.microsoft.com/en-US/library/ie/hh673557.aspx

I'm not quite sure about this.
On my web page, if I add 100 canvas and I draw shapes on each of them. Later if I don't need those stages anymore and want to add another 100 stages, Kinetic.Global.Stages/Shapes will have a lots of stuff in it.
Can I manually set them to empty before I add new stages?
Something like Kinetic.Global.Stages = [ ]; Kinetic.Global.Stages = { } ?

Hello Eric,

would it be possible to remove Animation from Sprite? or rename the current Sprite class to SpriteAnimations?

its just, no all Sprites are animated, there also could exists static sprites. for example https://github.com/clintbellanger/flare/blob/master/tiled/grassland/grassland_water.png here you can see a non animated Sprite, there must be a possiblity to define a Sprite without animations in my oppinion,

what do you think?

Shadow seems to be generated only for the first line of text. After automatic wrap nor '/n' no shadow is visible.

http://jsfiddle.net/piob/g3qqG/5/

Node.moveTo() bypasses completely the Container.add() / Container.remove() methods, including the optional ._add() and ._remove() making it harder for a container to add logic for each node.

The set of methods on Node to change the z-index also access the Container.children array directly, hiding those changes from the container.

Container.remove has two problematic behaviors. The first is that the removed child does not have its "parent" attribute unset. This means that, after Container.remove finishes, parent.isAncestorOf(child) still returns true, and child.getParent() is equal to parent.

Second is that Container.remove implicitly calls remove on all of its children. This means a traversal algorithm that is trying to clean up by removing a node from its parent has to either be bottom-up traversal or check if the node has been removed. Some external systems don't let you dictate traversal order, so the check is required, but (because of the parent issue above) can't be done without an O(n) traversal of the parents children.

The first issue needs correction. The second issue is sort of a design choice, but I'd rather Container.remove not remove the targets children, or have access to another method where this isn't done.

Custom shape is not draw on the same position of mouse position.

Where am I wrong?

function drawcircle(){
    var ctx = this.getContext();
    pos = this.getPosition();
    x1 = pos.x;
    y1 = pos.y;
    r1 = 70;
    r2 = 20;
    ctx.beginPath();
    ctx.fillStyle = "#000000";
    ctx.lineWidth=10;
    ctx.shadowColor="black";
    ctx.shadowBlur=10;
    ctx.arc(x1, y1, r1, 0, Math.PI*2, true);
    this.stroke();
    ctx.closePath();
}
function onload(){
    var stage = new Kinetic.Stage({
                              container: "container",
                                      width: 1024,
                                      height: 768,
                                  });

    var layer = new Kinetic.Layer();

    var rect = new Kinetic.Rect({
                                    x: 0,
                                    y: 0,
                                    width: 1024,
                                    height: 768,
                                    stroke: "black",
                                    strokeWidth: 4
                });

    var pointer = new Kinetic.Shape({
                                     drawFunc: drawcircle,
                                     x: 100,
                                     y: 50,
                                     fill: "#00D2FF",
                                     stroke: "black",
                                     strokeWidth: 12,
                                 });

    rect.on("mousemove", function() {
        pointer.setPosition(stage.getMousePosition());
        layer.draw();
            });

    layer.add(rect);
    layer.add(pointer);
    stage.add(layer);
}

When trying to use v.4.0.1 with the org.codehaus.mojo:javascript-maven-plugin, the minification fails with the following error
[ERROR] JSC_TRAILING_COMMA. Parse error. Internet Explorer has a non-standard intepretation of trailing commas. Arrays w
ill have the wrong length and objects will not parse at all. at input line 2216 : 1

The trailing comma on line 2216 just needs to be removed.

I try use it, but it work only for nodes in first layer

layer.add(shape_with_text11);
stage.add(layer);

hlayer2.add(rect);
hlayer2.add(shape_with_text);

stage.add(hlayer2);

hlayer2.hide(); //hide only shape_with_text, rect has no affect

When calling setDraggable on the Stage in my application and setting to false, I get an error:

Uncaught TypeError: Cannot read property 'cancelBubble' of undefined

Simple fix:

    // simulate event bubbling
    if (typeof evt != 'undefined' && !evt.cancelBubble && this.parent && this.parent.nodeType !== 'Stage') {
        this._handleEvent.call(this.parent, eventType, evt);
    }

Only happens for me when called on the Stage itself. Using this to implement panning.

Would be cool to have support for text with bold, italic, etc fonts.

There is a bug when using mouse and touch events at the same time (which I often use when debugging). After I use touch events for the first time mouse events doesn't work any more.

Problem is in _setTouchPosition. Here is a patch that works for me (check else statement):

_setTouchPosition: function(evt) {
        if(evt.touches !== undefined && evt.touches.length === 1) {
            // one finger
            var touch = evt.touches[0];
            // Get the information for finger #1
            var touchX = touch.clientX - this._getContentPosition().left;
            var touchY = touch.clientY - this._getContentPosition().top;

            this.touchPos = {
                x: touchX,
                y: touchY
            };
        } else {
            this.touchPos = undefined;
        }
    },

If there is no else statement, mousePos will never be looked again as soon as touchPos is set for the first time.

Hi Eric,

First, Thanks for this awesome framework..

I'm wondering what is the right way to use composting methods in kineticJS..

http://jsfiddle.net/v1r00z/RNLxb/

Thanks.

Not sure if this is intentional, but you get an error when you call moveToBottom on a node that is the only child within a container. The user could do this check, but it seems to make more sense to automatically handle this in the moveToBottom method and just return.

When creating a kinetic stage inside smaller scrollable div element, if the scroll has been used, event "trigger" won't be placed over object (shape) anymore.

Here is the problem, live on the http://jsfiddle.net/DfR77/

In KineticJS v.4.0.0 getIntersections results an array containing every shape on the container or layer:

v.4 example showing the issue in a console.log:
http://jsfiddle.net/mhnzS/

v.3.10.5 showing the correct results:
http://jsfiddle.net/mhnzS/1/

It would be great if custom or extended Shapes could override the default behavior where you call backstageLayerContext.isPointInPath(pos.x, pos.y). Maybe make the current behavior the default implementation in a new method on Shape, and allow classes that extend Shape to override it.

The reason is, my custom shapes want to provide point detection that is arbitrarily different from what was drawn on the canvas in the most recent path (such as shapes with multiple paths).

is Kinetic support IE8 or other older version ?
Maybe this is not a issue for the goal of this lib.

Hi.

First of all: thank you for this library!!

I found a small bug in the Ellipse Object on Firefox, the stroke radius is different from the object radius. I think this behavior arises in 3.10.2

One of the very convenient features of jQuery events is the ability to remove all events in a namespace; i.e.,

node.on('click mouseover.namespace mouseout.namespace mousemove', handler) 

would create four event bindings, two in the 'namespace' namespace, and

node.off('.namespace')

would remove all bindings in the 'namespace' namespace, leaving two bindings untouched. It would be very convenient to have support for this in KineticJS, especially since there is no API to determine what events are currently bound.

Can you add chaining to _addSetter function of Node? I suggest adding the line "return this;" right after "this.setAttrs(obj);" on line 1011 of /src/Node.js

Hi Eric,

I mentioned this before but I guess the old forum is now dead :)

Please notice in the following basic test - 3.10.3 layer.moveToTop() works just fine, but as of 3.10.4, 3.10.5, and 4.0.0 it has stopped working. I looked through the change notes and didn't see anything related to layers, or moveToTop().

http://www.bandersnatchii.com/kinetic_demos/layer_test.php

Please take a look, this is killing me :) I traced it in and saw that the layers do in fact change their zindex values .

Cheers.Scott

is Kinetic support IE8 or other older version ?
Maybe this is not a issue for the goal of this lib.

Hi, thanks for such amazing library.
But it lacks Ellipse class. I'm not very used to pull requests so I just post my implementation here:

///////////////////////////////////////////////////////////////////////
// Ellipse
///////////////////////////////////////////////////////////////////////
/**

• Ellipse constructor

• @constructor

• @Augments Kinetic.Shape

• @param {Object} config
  */
  Kinetic.Ellipse = function(config) {
  this.setDefaultAttrs({
  radiusX: 0,
  radiusY: 0
  });

  this.shapeType = "Ellipse";

  config.drawFunc = function() {
  var canvas = this.getCanvas();
  var context = this.getContext();
  context.beginPath();
  this.applyLineJoin();
  context.moveTo(0, -this.attrs.radiusY);
  context.bezierCurveTo(
  this.attrs.radiusX, -this.attrs.radiusY,
  this.attrs.radiusX, this.attrs.radiusY,
  0, this.attrs.radiusY);
  context.bezierCurveTo(
  -this.attrs.radiusX, this.attrs.radiusY,
  -this.attrs.radiusX, -this.attrs.radiusY,
  0, -this.attrs.radiusY);
  context.closePath();
  this.fillStroke();
  };
  // call super constructor
  Kinetic.Shape.apply(this, [config]);
  };
  /*

• Ellipse methods
  /
  Kinetic.Ellipse.prototype = {
  /*

  • set radiusX
  • @param {Number} radiusX
    /
    setRadiusX: function(radiusX) {
    this.attrs.radiusX = radiusX;
    },
    /*
  • get radiusX
    /
    getRadiusX: function() {
    return this.attrs.radiusX;
    },
    /*
  • set radiusY
  • @param {Number} radiusY
    /
    setRadiusY: function(radiusY) {
    this.attrs.radiusY = radiusY;
    },
    /*
  • get radiusY
    */
    getRadiusY: function() {
    return this.attrs.radiusY;
    }
    };

// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Ellipse, Kinetic.Shape);

Hi

Just a small indention typo in the Stage file :
https://github.com/ericdrowell/KineticJS/blob/master/src/Stage.js#L481

Nothing huge, but it prevents proper code folding in text editors.

Thanks for the recent textWrap solution. That's great.

Would it be possible to go a step further and handle new lines characters?
This way it could be easy to grab a textarea value and render it directly into the canvas.

I have a rectangle and inside it another resizable rectangle I have. I would like to bound rectangle inside it to not move outside of it. What is the easiest way to accomplish it? I thought maybe bounds as a function can be helpful.