rsandor / gury Goto Github PK

View Code? Open in Web Editor NEW

349.0 349.0 18.0 2.21 MB

A jQuery inspired canvas utility library

Home Page: http://guryjs.org

JavaScript 100.00%

gury's People

Contributors

Stargazers

Watchers

Forkers

fadzril jaredwilli swiftslipper msoftware austinbv mmavko beardhatcode nimrod2410 netconstructor srinivasarao549 madbarua kaiquewdev stevexucd mitar davgit prodigeni generalx1

gury's Issues

Crop and resize?

This would be great. Also related to: meltingice/CamanJS#17 perhaps you guys should team up :)

Use requestAnimationFrame

Use requestAnimationFrame for better animations (smoother, less battery, no tearing, synced drawing)

http://dev.chromium.org/developers/design-documents/requestanimationframe-implementation
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame
http://blog.chromium.org/2011/03/getting-smoother-animated-web-content.html

.mouseenter/.mouseleave not working?

Hello there, I'm really enjoying this library, but I .mouseenter/.mouseleave isn't working for some reason. Any ideas?

Code:

<!DOCTYPE html><html>
  <head>
    <title>Guryyyyy</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        html, body{
                width: 100%;
                height: 100%;
                overflow: hidden;
            }   
    </style>
    <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="http://github.com/downloads/rsandor/gury/gury.min.js"></script>
  </head>
  <body>

  </body>

<script type="text/javascript" charset="utf-8">
function coordinates(x, y) {
    if (typeof x === "undefined") {
        this.x = 0;
    } else {
        this.x = x;
    }

    if (typeof y === "undefined") {
        this.y = 0;
    } else {
        this.y = y;
    }
};

var ANCHOR_TOP_LEFT = new coordinates();
var ANCHOR_TOP_RIGHT = new coordinates(window.innerWidth);
var ANCHOR_BOT_LEFT = new coordinates(0, window.innerHeight);
var ANCHOR_BOT_RIGHT = new coordinates(window.innerWidth, window.innerHeight);

g = $g().size(ANCHOR_BOT_RIGHT.x, ANCHOR_BOT_RIGHT.y).background("black").place('body');

function boxy(width) {
    this.width = width;
}

boxy.prototype.draw = function(ctx,canvas) {
    ctx.fillStyle = "#FFF";
    ctx.beginPath();
    ctx.rect((0.05*ANCHOR_BOT_RIGHT.x),(0.05*ANCHOR_BOT_RIGHT.y),this.width,(0.9*ANCHOR_BOT_RIGHT.y));
    ctx.fill();
};

g.add('box', new boxy(100));
//Click works great
//g.click('box', function(e){this.width += 10;});
g.mouseenter('box', function(e){this.width += 10;});
g.play(32);
</script>
</html>

Bezier curves?

Hi,

Is it possible to draw and animate bezier curves with this library?

Thx,

Clement

Same Game

Could I get the demo code for same game?

Tags cannot contain dash (-)

It seems tags cannot contain dash (-)? If I use them, then remove() does not remove objects it should.

Automatically delegating events to added objects?

I'm adding objects to my canvas, and they have their own update and draw functions, which get called automatically after play() is started. However, I also want them have their own functions for event handling, such as mouseenter, mousedown, etc.

So instead of

$g().add('myGuy', new Guy());
$g().mousedown('myGuy', handleMouseDown());

The mousedown events will be delegated to the objects themselves, so adding myGuy to the canvas will let it start receiving events automatically, like this:

$g().add('myGuy', new Guy());
// now when the mouse enters the Guy object's space, it will call the Guy object's mouseEnter function, etc.

I don't see anyway to set this up currently, is it possible, or can it be made possible?

.each should have a callback with index and object, not object and index

.each currently uses a callback where arguments are in order object, index, but jQuery for its .each uses first index and then object. It is really unintuitive to use different arguments order in the code for a similar method, so I would propose an API change, .each should use a callback with arguments in order same as in jQuery: first index, then object.

Demo4 Interactivity Doesn't Work in Firefox 3.x

Clicks fail to remove blocks in Firefox 3.x: offset{X,Y} isn't an event property of mousedown. As page{X,Y} will be there, try evt.pageX - $(this).offset().left and such instead.

Code error in the API intro

Your second example I think should start with :

$g("canvasOne")

It is currently missing the g.

I am having fun learning the library. Good stuff.

Unify play and draw

Currently it is really cumbersome to switch between play and draw. Most of the time I have a static drawing, but for some effects I use animation. Because I would like to keep CPU usage for clients low I do not want to "play" all the time.

So I have a proposal: let objects added to the drawing queue have additional method "animate" which returns true or false if it is necessary to animate it (and call "update" and so on). Then provide additional method (to keep things backwards compatible) called "run", which would do something like every few ms: go trough all objects and call "animate". If any object returns true, call update on it. At the end, if any object returned true from "animate", redraw. Otherwise do nothing.