koggdal / ocanvas Goto Github PK

View Code? Open in Web Editor NEW

488.0 25.0 76.0 1.16 MB

JavaScript library for object-based canvas drawing.

Home Page: http://ocanvas.org/

License: MIT License

JavaScript 100.00%

ocanvas's People

Stargazers

Watchers

ocanvas's Issues

Node build.js is throwing error on development branch

I am seeing this error in terminal.

Minifying source with UglifyJS...

node.js:134
throw e; // process.nextTick error, or 'error' event on first tick
^
TypeError: object is not a function
at Object.CALL_NON_FUNCTION (native)
at new JS_Parse_Error (/Users/kjantzer/Downloads/ocanvas/build/lib/parse-js.js:262:20)
at js_error (/Users/kjantzer/Downloads/ocanvas/build/lib/parse-js.js:273:15)
at parse_error (/Users/kjantzer/Downloads/ocanvas/build/lib/parse-js.js:364:17)
at Object.next_token as input
at next (/Users/kjantzer/Downloads/ocanvas/build/lib/parse-js.js:693:37)
at expr_op (/Users/kjantzer/Downloads/ocanvas/build/lib/parse-js.js:1185:25)
at expr_op (/Users/kjantzer/Downloads/ocanvas/build/lib/parse-js.js:1187:32)
at expr_ops (/Users/kjantzer/Downloads/ocanvas/build/lib/parse-js.js:1193:24)
at maybe_conditional (/Users/kjantzer/Downloads/ocanvas/build/lib/parse-js.js:1197:28)

Moving end of the line with parent object

example http://fiddle.jshell.net/cw2EJ/15/show/
sources(http://jsfiddle.net/cw2EJ/15/)

drag the end of the line (ellipse) and observe start of the line moving on each redraw call. The happens when parent object is not at (0,0) position.

Event problem when associating 2 oCanvas objects on same <canvas>

Hi,

I have special use case, when I want to define 2 or more oCanvas objects on single (same) html canvas element. Then I get events mixed. I think that problem occurs because 2 or more oCanvas objects mix object events because of children object ID-s which are same in both oCanvas objects.

For example:

define 2 oCanvas objects on single canvas
add rectangle children on both oCanvas objects
add dragDrop events on those 2 rectangles
show only one oCanvas object, events work
show second oCanvas, events don't work
Switch back to first oCanvas object, events work

Here is code example. You'll notice that second black rectangle events don't work.

<html>
<head>
    <meta charset="UTF-8" />
    <title>oCanvas Example</title>

    <script type="text/javascript" src="http://localhost:88/ocanvas-2.1.1.js"></script>
    <script type="text/javascript" >

    var canvas;
    var canvas2;
    var rectangle;
    var rectangle2;
    var p1,p2;

    function load()
    {   
        //1st oCanvas
        canvas = oCanvas.create({
            canvas: "#canvas"
            ,background: "#ccc"
        });

        rectangle = canvas.display.rectangle({
            x: 277,
            y: 100,
            width: 100,
            height: 100,
            fill: "#000"
        });

        canvas.addChild(rectangle);
        rectangle.dragAndDrop();       

        //2nd oCanvas
        canvas2 = oCanvas.create({
            canvas: "#canvas"
            ,background: "#ccf"
        });

        rectangle2 = canvas2.display.rectangle({
            x: 77,
            y: 100,
            width: 100,
            height: 100,
            fill: "#00f"
        });

        canvas2.addChild(rectangle2);
        rectangle2.dragAndDrop();

    }


    function klik()
    {
        canvas.clear();    
        canvas.events.enabled = false;

        canvas2.draw.redraw(); 
        canvas2.events.enabled = true;        

    }

    function klik2()
    {
        canvas2.clear();    
        canvas2.events.enabled = false;

        canvas.draw.redraw();
        canvas.events.enabled = true;


    }

    </script>

</head>
<body onload="load()">

    <input type=button value="Klik" onclick="klik()" />
    <input type=button value="Klik2" onclick="klik2()" />

    <canvas id="canvas" width="500" height="500"></canvas>


</body>
</html>

Background does not redraw properly on resized canvases

If I resize my canvas after initializing the Core module, and then call redraw() on either the Core module or the Draw module, the background doesn't redraw to fill the canvas. Calling reset() on the Core module doesn't work either, nor does using the set() method on the Background module. If I were to guess, I think it's due to the drawing function not checking for canvas size changes after the initialization.

Don't redraw the canvas when add a new object

event handling on objects with negative height fails

When using negative heights (to size objects in the opposite direction of the default downward y-axis), events are not handled correctly.

stop() doesn't stop animations on Sprite objects

There seems to be a naming conflict here. On a Sprite the stop() function stops it's frame animation. But it can be animated via animate(), in which case stop() doesn't cut the animation short.

RFE: helper for removing core objects from oCanvas.canvasList

I'm wondering if an helper for removing a canvas from the oCanvas.canvasList may be useful. For my use case i need something to remove all children from a core object, clear everything to start again from scratch but i can see where one may want to remove a core object after it has done its work, to let the browser free some memory at least.

AddChild doesn't seem to redraw the canvas

Hi,

Thanks for your last commits, the z-index & dragndrop are working nicely !

I'm now using your develop branch and noticed that objects weren't redrawn after addChild, in the same time my code didn't changed (sorry for the uggly code)

In fact they are drawn on the next addChild. You can try it here, on my dumb-pet-projet : http://ding-ding-dong.me

Cheers

Use window.pageYOffset instead of document.documentElement.scrollTop

Using document.documentElement.scrollTop and document.documentElement.scrollTop in getPos function is problematic for complex layouts and lacks cross browser compatibility.

Replacing them with window.pageYOffset and window.pageXOffset works in most cases and is cross browser compatible.

Google chrome

Hi,

Sorry for my bad english.

Since few times oCanvas not working in Google chrome.

Events (mousedown, mouseup) are not recognize.

What is the problem ?

Thank you for your help.

Background Image

please show me how to set background image for a rectangle and changle source image object

var rect = Canvas.display.rectangle({
x: 10, y: 10,
width: 100, height: 100,
fill: "image(image1.png)",
});

rect.fill = "image(image2.jpg)";// not work

Add support for dblclick

It's great that we can bind to "click", but it would also be nice to be able to trigger an event on a double click.

dragAndDrop fails after disabling and re-enabling

I have created a bunch of text objects and made them dragAndDrop().

Then later in my app, I iterate through my objects and turn drag and drop off
theTextObj.dragAndDrop(false)

Then, if I click anywhere in the canvas, I see this error in the console:

Uncaught TypeError: Cannot call method 'call' of undefined        ocanvas-1.1-dev.js:1637

This is at line 1637:

triggerHandlers: function (obj, types) {
    var i, handlers, numHandlers, n, e;

    for (i = 0; i < types.length; i++) {
        handlers = obj.events[types[i]];
        e = ~types[i].indexOf("key") ? this.lastKeyboardEventObject : this.lastPointerEventObject;
        e.type = types[i];

        if (handlers) {
            numHandlers = handlers.length;
            for (n = 0; n < numHandlers; n++) {
                handlers[n].call(obj, e);
            }
        }
    }
},

Then, if I try to make my objects dragAndDrop again, nothing happens. I can still do other things with my objects like rotate, adjust size, etc.

Support of z-index

Hi,

First I would like to thank you for your hard and nice work !

Have you planned to support a z-index property on displayed objects ?

I've forked ocanvas and I'm digging in the code trying to figure how to add this feature. Have you some hints about a possible implementation ? I'm not sure if I will be able to do this but I'm thinking about following this steps, tell me if I'm wrong or if i miss something :

add a zIndex property to the displayobject class
add a zIndexedObjects property (2D array) in the draw class to store object in the right order.
rewrite the add method of the draw with something like this : this.zIndexedObjects [obj.zIndex].push (obj) (and the remove method accordingly)
rewrite the loop in the redraw method to use the zIndexedObjects
In the zIndex setter of displayobject, tell the draw class to update the zIndexedObjects

What do you think ?

Cheers

Uncaught TypeError using oCanvas.Line

When using canvas.display.line , if you move your mouse pointer over the canvas area, you will receive an error stating "Cannot read property 'abs_x' of undefined. This was in Chrome. When in firefox I was able to get a bit more info, however it happened at a few locations for me, one of them being line 5139 with the below code where this.parent was assigned but this.parent._ is undefined :

if (this.parent) {
offset.x = this.parent..abs_x;
offset.y = this.parent..abs_y;
}

I am getting the same abs_x issue at the website link if you open up firebug or chromes dev console: http://ocanvas.org/docs/Display-Objects/Line

Issue z-index using rectangles as layers

When using rectangles to organize different layers of displayObjects, the z-index of the parent displayobject is not used.

So when you add 2 layers to the canvas (layer2 is added later, so it resides on top layer1), displayObjects added to layer1 should always be beneath objects added to layer2, no matter the add sequence.

Instead, objects seem to be added on top of the display-stack, no matter the z-index of the parent it was added to.

DragAndDrop seems to delete unrelated events

When I execute dragAndDrop(false) on multiple elements oCanvas will delete unrelated events.
I've created a detailled example which demonstrates the problem:

<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://ocanvas.org/source/ocanvas-1.0.js"></script> 
    <script type="text/javascript">
        $(document).ready(function() {

        // this only changes the order of dragAndDrop(false)
        const ENABLE_BUG = true;

        var canvas = oCanvas.create({
            canvas: "#MainCanvas",
            disableScrolling : true
        });
        canvas.background.set("#61995e");


        // cone
        var cone = canvas.display.image({
            x: 50,
            y: 50,
            width: 20,
            height: 20,
            origin: { x: "center", y: "center" },
            image: "http://www.clker.com/cliparts/D/D/P/3/8/u/traffic-cone.svg"
        });
        canvas.addChild(cone);
        cone.dragAndDrop();


         // player
        var player = createPlayer(canvas);
        canvas.addChild(player);


        // canvas event..
        canvas.bind('mousedown', function() {
           console.log('mousedown');


           // Bug demonstration
           if ( ENABLE_BUG == true ) {
               // If we disable the dragAndDrop of these elements in this order 
               // the canvas.mousedown event will be deleted
            cone.dragAndDrop(false);
            player.dragAndDrop(false);
           } else {
               // somehow, when we change the order of disablement it works??
            player.dragAndDrop(false);
            cone.dragAndDrop(false);
           }

           alert('mousedown: disabled dragAnDrop');
        });


        function createPlayer(canvas) {
            const PLAYER_WIDTH = 20;
            const PLAYER_HEIGHT = 15;
            var scale = 1;

            var player = canvas.display.rectangle({
                x: 10,
                y: 10,
                width: PLAYER_WIDTH ,
                height: PLAYER_HEIGHT,
                stroke: '0px blue'
            });

            var item = canvas.display.polygon({
                x: 10 * scale,
                y: 5 * scale,
                radius: 10 * scale,
                sides: 3,
                rotation: 90,
                fill: 'red',
                stroke: "1px black"
            });

            var playerNo = canvas.display.text({
            x: 6 * scale,
            y: 5 * scale,
            align: "start",
            font: "10px arial",
            text: "1",
            fill: "white"
            });

            player.addChild(playerNo);


            player.bind("mouseenter", function () {
            canvas.mouse.cursor("pointer");
            }).bind("mouseleave", function () {
            canvas.mouse.cursor("default");
            });
            player.dragAndDrop({
            start : function() {
                canvas.mouse.cursor('move')
            },

            end : function() {
                canvas.mouse.cursor('pointer')
            }
            });

            return player;
        }

        });
    </script>
    </head>
    <body>
    <canvas id="MainCanvas" width="200" height="200">
        Unsupported Browser
    </canvas>
    <h2>This file demonstrates the bug in oCanvas.</h2>
    <p>It works as following:
    <ol>

        <li>I create two different objects and enable them for dragAndDrop</li>
        <li>I add an canvas-wide mousedown event (canvas.bind)</li>
        <li>In this mousedown event I disable the dragAndDrop for both draggable elements</li>
        <li>Depending on the order of the disablement the oCanvas library also deletes the canvas-wide mousedown event</li>
    </ol>
    With ENABLE_BUG set to false you will see that the mousedown event will be called again (expected). While set to true you will only see one alert..
    </p>
    <p>Note: set ENABLE_BUG to false to see the difference if we only change the order of disablement.</p>
    </body>
</html>

I only tested it in Firefox 8.0.1 on OS X 10.6. But I expect this has nothing to do with browser compatibility, rather something in the the event unbinding mechanism of oCanvas. I traced the problem to lines 3682 - 3684, however there is probably some underlying problem.

Oh, I used the most recent version of oCanvas (1.0).

Origin not calculated correctly with different text aligns

I have a text object with origin set to "center","center" and text align is set to default "start".
I then set x and y coordinates to be exactly in the center of my canvas. (half the width and half the height)
So far, everything renders as it should.

However, as soon as one changes the alignment to "center", "right", or "end", the x origin of the text block is no longer in the middle. The vertical origin seems unchanged, only horizontal is affected.

I am able to keep align "center" centered in the canvas by setting the x origin to "left" rather than "center". But I don't think this is the desired affect.

dragAndDrop events have priority over bind(click tap) regardless of zIndex

( this is on the development version as of 12/8/11 )

If a click-able object is above an object with dragAndDrop enabled, when a click event happens it is passed to the drag start handler and does not fire the click event first like it should.

Android 4.0 bug: poor performance and distortion

Try to open simple satellite system demo on android 4.0 and you will see poor performance and distortion of objects, especially circle objects. I tested on Samsung Galaxy Tab 7.2 (GT-P3110).

It works great on Android 2.3 and iOS

PS: I tested on Chrome for Android

Disable events on oCanvas object

Hi,

I have one question. I want to temporary disable all events on all drawn objects on oCanvas. Is it possible to disable events without unbinding every object events with object.unbind or object.dragdrop(false). For example:

var oCan = oCanvas.create({
canvas: "#idcanvas"
});

//draw some objects...
oCan.addChild(circle1);
oCan.addChild(circle2);
oCan.addChild(circle3);
...
//diable all mouse and keyboard events on oCanvas
oCan.diableEvents = true;

Thanks

Implement the opposite of transformPointerPosition

That is, transform a local coordinate to a global coordinate. I'd like to position some elements relative to a display object somewhere down the chain, but that is difficult without knowing the location.

I guess this is already done when actually drawing, but I haven't been able to find (or understand) it. Thanks!

No mouseenter events with 360 degrees filled arc

While the stroked one works flawlessly.

Test case here:
https://gist.github.com/2377835

isPointerInside function does not work for all angles

The algorithms used do not work for all angles.

resize sprite image

var img = Canvas.display.sprite({
x: 0, y: 0,
width: 34,
height: 51,
direction: "x",
generate: true,
image: "images/qbai.png",
frame: 1
});
real size of image is 34x 51 ,how to resize that ?

Android rendering bug / poor performance - Duplicate/distorted rendering of images

( this is on the development version as of 12/8/11 )

Some duplication and distortion of image displayobjects, especially those with shadows, occurs in Android 2.3 devices (probably other android versions too, but I can't confirm).

You can see an example here if you view it in Android: http://dracsoft.com/atge/tests/game-frontend.html
Choose Chess or Oware to see the behavior.

Text attributes don't adjust to multi-line text

Certain attributes, such as stroke, don't adjust.

If you create a text object with a multi-line ("My Book\nTitle") and give it a stroke, the stroke continues on like all the text is on one line. Also, if you make the text "dragAndDrop", the first line of the text triggers the drag event, but the other lines do not.

There may be other attributes that don't adjust, but these two I discovered in my use of the tool.

FYI - shadow adjusts perfectly.

FEATURE: Allow dragAndDrop to "pass" through objects that cannot be dragged

For example: Say you have a photo frame .png with the middle being transparent. Then you want to put an image behind the frame. At this point, the photo frame can be dragged but the image behind it cannot. This makes sense as the frame is on top. However, if dragAndDrop is disabled on the photo frame, one still cannot access the image behind it. Therefore, one must move the frame first before being able to drag the behind image.

It would be nice if, when dragAndDrop is turned off on the photo frame (top object) that the image behind (next object down) could be draggable.

Stacked object & dragAndDrop

Hi,

Dragging overlapping objects move every object under the cursor, one would expect to drag the top-level/front object only. The first object to handle the event should, return false to cancel the event propagation.

What do you think ?

Cheers

event dont work

<--div style="position: absolute; left:500px; top:500px;">
<--canvas id="lianliankan_lianliankan_30" width="422" height="411" style="border:1px solid red;z-index:2;"-->

when I set a absolute position to the div then,the canvas can not triger any event, thouth my test, when the page has scroll bar, and scrolled, the displayobject will has error coordinate, so obj.isPointerInside(pointer) will not correct judge the object. Today, I test again, this error appear at ios device of touch event..

zIndex

i have two rect and set zIndex for each but seem zIndex dont work

DragAndDrop coordinates are not translated correct for children of rotated objects

( this is on the development version as of 12/8/11 )

When a child displayobject is dragged around, the object does not follow the mouse correctly if it's parent has been rotated.

drag&drop of multiple display objects

Is there a way to move multiple display objects at the same time when one is dragged? e.g. a pie chart like http://ocanvas.org/demos/1. Something like drag and drop for a whole scene maybe?

Object events aren't triggered properly when the page is scrolled

I'm getting fairly consistent bugs when a canvas is further down the page. I've tried re-drawing it on window.scroll, just in case that was the issue, but still no luck.

Events are triggered properly when applied to the base; it's just on display objects, such as Arcs or Ellipsis.

I've had a look at the transformPointerPosition and isObjectInside methods, and can't see anything to do with a window.scrollY offset?

Any ideas?

set width of parent container, also changes width of children

When i set the width of a display object that already contains other display objects, the child-objects are also resized.
I expect this behaviour only when i scale an object...

Use of getters/setters removes any chance of compatibility with IE

First off, great job on this library. Next time I need a scene graph, I may put this thing through the ringer with some game dev.

I was evaluating using oCanvas in a project for work, where, unfortunately, the requirements are >= IE6. I hoped that with a canvas shim everything would be ok (I'm using FlashCanvas)...

GAH! Getters and setters! Foiled!

I know it's a long shot that you'd even consider removing them, but I figured I'd at least report this in the event that others are wondering... and to save them some time.

I realize it's non-trivial and would break the current API. Also, I suppose it's sort of trivial in difficulty to remove getters/setters and replace them with function calls, but would still take time (which I don't believe I have enough for this work project).

Let's say I got really motivated, and replaced all the getters/setters... what would you think of that?

bezier lines?

is there any way to draw bezier lines? Is there a discussion forum more appropriate for this kind of question?

Boolean argument in Draw#clear is confusing

It's a "Boolean trap", I found out using my script described in http://ariya.ofilabs.com/2012/06/detecting-boolean-traps-with-esprima.html. The alternative is (1) argument object (2) another function.

touch event when scroll

i read and fix as issue #30 but position of object when scroll in iphone is wrong, please fix for me

Event handling on children of scaled displayobjects is incorrect

( this is on the development version as of 12/8/11 )

The clickable/event area of child displayobjects is calculated incorrectly if it's parent object is scaled to anything but 1.0.

scroll bar

how to create a auto scroll bar when children bigger parent ?

finish() breaks with line 3444: Uncaught TypeError: Cannot call method 'call' of undefined

I got this when calling finish() i suspect it does not like being called before any animation has been queued:

line 3444: Uncaught TypeError: Cannot call method 'call' of undefined

These are the local variables:

obj: undefined
objectID: 4
properties: undefined
property: undefined
queue: Array[1]
this: Object

RFE: implement jquery like .delay() in animation

This let you delay the following animations by given seconds. See http://api.jquery.com/delay/

format text

how to make a text multil line?
set height and width for text box

displayobject.remove() explodes if parent is undefined

I got this while doing some silly mistakes on my side but looking at the code it may be helpful to early return if this.parent is undefined around displayobject.js:380

(X,Y) position is not relative to parent

example http://fiddle.jshell.net/cw2EJ/21/show/
source http://jsfiddle.net/cw2EJ/21/

steps:

drag and drop end of the line
alert msg pops up with positions 60, 30, but we've created line at 50, 20
drag and drop square (it is parent)
drag and drop end of the line once again
start position of the line has changed

Doc says x, y should be relevant to the parent

Events misplaced after css rotation of canvas container

If i rotate with css the canvas container the events associated to the objects are fired over a different area, in the test case the event added to the light blue object are fired a few pixels above the red one.

https://gist.github.com/3832805

dragAndDrop miscalculated when text alignment is changed

This bug is related to changes introduced for a fix to issue #23

When changing text align to something other than "left" (particularly "center" and "right"), the dragAndDrop position is not calculated properly. It appears to think the text object is being rendered like it was before issue #23. For instance, when align "center", I can grab the left half of the text object, but not the right. I can also grab half the distance off to the left of the text and drag.

There's always something to be fixed isn't there!
Gotta love code.

remove all children set animation

i have ploblem with removing many sprite is set animation,

ex :

sprite1.animate({
          ................
});

sprite2.animate({
          ................
});

button.bind('click tap',function() {
for (var i = 0; i< Canvas.children.length; i++) {
Canvas.children[i].remove();
}
});

the loop only remove the first sprite!

koggdal / ocanvas Goto Github PK

ocanvas's People

Stargazers

Watchers

Forkers

ocanvas's Issues

Recommend Projects

Recommend Topics

Recommend Org