koggdal / ocanvas Goto Github PK
View Code? Open in Web Editor NEWJavaScript library for object-based canvas drawing.
Home Page: http://ocanvas.org/
License: MIT License
JavaScript library for object-based canvas drawing.
Home Page: http://ocanvas.org/
License: MIT License
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.
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.
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
how to create a auto scroll bar when children bigger parent ?
how to make a text multil line?
set height and width for text box
( 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.
This let you delay the following animations by given seconds. See http://api.jquery.com/delay/
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.
i read and fix as issue #30 but position of object when scroll in iphone is wrong, please fix for me
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.
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.
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
example http://fiddle.jshell.net/cw2EJ/21/show/
source http://jsfiddle.net/cw2EJ/21/
steps:
Doc says x, y should be relevant to the parent
( 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.
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
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.
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!
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.
<--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..
is there any way to draw bezier lines? Is there a discussion forum more appropriate for this kind of question?
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.
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.
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
( 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.
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...
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)
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.
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.
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
( 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.
i have two rect and set zIndex for each but seem zIndex dont work
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 :
displayobject
classdraw
class to store object in the right order.add
method of the draw
with something like this : this.zIndexedObjects [obj.zIndex].push (obj)
(and the remove
method accordingly)redraw
method to use the zIndexedObjects
zIndex
setter of displayobject
, tell the draw
class to update the zIndexedObjects
What do you think ?
Cheers
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!
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
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?
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.
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?
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?
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.
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
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.
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.
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 ?
When using negative heights (to size objects in the opposite direction of the default downward y-axis), events are not handled correctly.
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:
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>
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).
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
The algorithms used do not work for all angles.
While the stroked one works flawlessly.
Test case here:
https://gist.github.com/2377835
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.