Questions tagged [bonsaijs]
A lightweight graphics library with an intuitive graphics API and an SVG renderer.
20
questions
0
votes
1
answer
287
views
Bonsai JS error
The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta ...
1
vote
1
answer
296
views
how to use variable on bonsai.js?
var star = document.getElementById("star");
var color = "#ef6360";
bonsai.run(star, {
code: function() {
new Star(30, 30, 20, 5, 0.7).attr({
fillColor: color
})....
0
votes
1
answer
91
views
How do I add a class to a Rect in bonsaijs?
I need to add a class to a Rect. I can't seem to figure out how to do it.
bar = (new Rect(x, ySegment * 10 + 30 + margin, w, 0)
.attr('opacity', 0.8)
.attr('...
2
votes
1
answer
163
views
Animate a movie along a path in BonsaiJS
I have been building a series of animations using BonsaiJs and really enjoying using the library.
Thinks have been working really well for some keyframe animations, and shape animations.
However I ...
0
votes
1
answer
165
views
Style SVG elements with Bonsai JS
Just started using Bonsai JS and can't find anything in the docs so I thought I ask here. How can I set an elements class attribute so I can define some styles in CSS? Most of the styles are supported ...
0
votes
1
answer
107
views
can i export svg from bonsaijs to png
Using bonsaijs, is there a way to export the stage (or entire svg) to a png file ?
I saw an option for importing a svg, but couldn't find an easy way to export it. Any leads on this would be ...
1
vote
1
answer
63
views
Accessing the position of simple shapes
I have a Rect assigned to a variable myrect:
var myrect = new Rect (250,0,20,200);
I thought that writing:
console.log(myrect.x);
would output 250 but, it says "undefined".
I would like to know ...
0
votes
1
answer
68
views
Stop event propagation in Bonsai.js
How do I stop a mousedown event from propagating to the stage?
stage.addListener("pointerdown", startDrawing);
rect = Path.rect(x, y, 100, 100);
stage.addChild rect;
rect.addListener("pointerdown", ...
1
vote
0
answers
380
views
Benchmark.js and Bonsai.js
I'm currently testing some Visualization toolkits performance and have a problem testing bonsai.js.
Every time I run the benchmark the chrome renderer crashes, and i can't seem to find the problem ...
0
votes
2
answers
1k
views
How can BonsaiJS load external SVG files?
I am learning to work with BonsaiJS and would like to import an external SVG image on the stage.
At http://docs.bonsaijs.org/overview/Path.html I learnt that there are three ways to create a new Path(...
0
votes
1
answer
115
views
Javascript Animation - Why Am I Unable to Scroll Now (in Chrome)
I'm playing around with the bonsai.js library, and I added a big stage to the hero section of my site. However, in Chrome, when the mouse is over the stage (between the tagline and blue button ...
6
votes
1
answer
14k
views
Uncaught TypeError: Illegal constructor – Using Bonsai.JS in Backbone.JS
I'm still new to js and I'm trying to fit bonsai.js into a backbone app.
I'm following this guide here: https://github.com/iamdustan/bonsai-demos , and trying to 'Separate Things Out' by putting ...
0
votes
2
answers
1k
views
How Can I Animate my SVG files with a JS Library - Is Bonsai Ideal for this?
I would like to find and learn a js library that will allow me to animate SVG files that I've created in Illustrator. I have a large background in After Effects and motion graphics, so I'm looking ...
0
votes
1
answer
100
views
Inconsistence of text on bonsaijs
I'm just getting started with BonsaiJS and I've found some odd behaviour with how Text gets displayed. As the following pic shows, on Chrome(25), Firefox(19) and IE(9) the text example on the site is ...
0
votes
1
answer
244
views
Bonsai js in Orbit
I can add my shapes to the stage and get them to do fades and such, but I can't get them to morph - do I need to separate out into lines and curves somehow?
var shape = new Path('M 321.051,510.078 c ...
1
vote
1
answer
278
views
How to pass event data from the stage to the parent context without deconstructing/reconstructing it?
consider the following code:
window.stage = bonsai.run(document.getElementById('stage'), {
code: function() {
var circle;
circle = new Circle(200, 200, 50);
circle.stroke('green', 2);
...
1
vote
0
answers
124
views
WORKER undefined
bonsai docs “Communication” section (http://docs.bonsaijs.org/overview/Communication.html) has the following example which runs everywhere, except IE9:
<script src="http://cdnjs.cloudflare.com/...
0
votes
1
answer
87
views
Masked boxes still call functions
There's a way to attach a event like mouse over into a mask?
This example shows my problem: http://goo.gl/DRhsH
When you pass the mouse NEXT to the blue box, it changes the color from the mask, what ...
0
votes
1
answer
504
views
Changing bonsai code dynamically
I have this part of code
<script>
var xhr = new XMLHttpRequest();
xhr.open('POST', 'getNewUsers.php',false);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")...
0
votes
3
answers
460
views
Display jquery UI dialog after click on a bonsaijs shape
Hello I have this code
$(function() {
bonsai.run(document.getElementById('movie'), {
code: function() {
var rect= new Rect(0, 0, 100, 100);
rect.on('multi:pointerdown', function(e) {
...