Drawing a simple circle using Crafty.js and Box2d - javascript

i am trying to draw a simple circle using box2d with crafty.js but i can't seem to able to draw it
this is the jsfiddle : http://jsfiddle.net/B5UsC/2/
look at this part of the code :
var ball = Crafty.e("2D, Canvas,Color, Box2D,ball")
.attr({ x: 10, y: 15, z:5 })
.color("#fff")
.box2d({
bodyType: 'dynamic',
density: 1.0,
friction: 2,
restitution: 0.2,
shape: 'circle'
}).onContact("Floor",
function (data) {
alert("Hi");
});
the weird thing about it is that alert is executed but the ball is not showing . am i missing something please help

The external resources
Box2dWeb-2.1.a.3.js
box2d.js
crafty.js
this directs to an Unavailable Page that's why it doesn't work in the fiddle
Try downloading the source CraftyJS,Box2dweb and Box2d
Try and see if that works for you.
Ok I got your code working, it seems that the reference library crafty+box2d is a mod made by the user who made the pong game.
You forgot to put the width w and height h attribute in the .attr of the ball object.
var ball = Crafty.e("2D, Canvas,Color, Box2D,Ball")
.attr({ x: 10, y: 15, z:5 , w:25,h:25 })
.color("#dddddd")
.box2d({
bodyType: 'dynamic',
density: 1.0,
friction: 2,
restitution: 0.2,
shape: 'circle'
}).onContact("Floor",
function (data) {
alert("Hi");
});
On the other hand if you want the box outline eating the circle
remove the text ,color in the string argument of Crafty.e and erase the .color property
var ball = Crafty.e("2D, Canvas,ball, Box2D,")
.attr({ x: 10, y: 15, z:5 , w:25,h:25 })
.box2d({
bodyType: 'dynamic',
density: 1.0,
friction: 2,
restitution: 0.2,
shape: 'circle'
}).onContact("Floor",
function (data) {
alert("Hi");
});
Hope this helps :)

Related

Drag move fabric JS controls

Who can help me a little with JS Fabric move / drag function?
I want the drag / move function triggered by de left top corner and I tried the code below:
//drag function
const dragOriginal = fabric.Object.prototype.controls.tl;
fabric.Object.prototype.controls.moveObject = new fabric.Control({
x: -0.5,
y: -0.5,
actionHandler: dragOriginal,
actionName: 'drag',
cursorStyle:'pointer',
render: renderIcon,
cornerSize: 25
});
This gives me the following error in the console
actionHandler is not a function. (In 'actionHandler(e, transform, x, y)', 'actionHandler' is an instance of Object)
Who can help me with this?
I think this is the answer
fabric.Object.prototype.controls.moveObject = new fabric.Control({
x: -0.5,
y: -0.5,
actionHandler: fabric.controlsUtils.dragHandler,//change to this
actionName: 'drag',
cursorStyle:'pointer',
render: renderIcon,
cornerSize: 25
});
I hope this is were you looking for.

Fabric.js. Dynamic Pattern not working

A little bit frustrated here. I am trying to get dynamic patterns work as it shown on demo here http://fabricjs.com/dynamic-patterns.
I wrote function but it won't change pattern size once t is created.
I tried to assign img object to window array and change sizes and even inserted rescale operation at the end of the function, but my pattern still won't change its size.
I know i'm doing something wrong, but i cannot figure what.
Maybe it is Fabric.js version or canvas.requestRenderAll();
Please, let me know if you have any idea on how to deal with this problem.
Here is the code.
'setBackgroundItem':function(){
fabric.Image.fromURL(arr.image, function(img) {
var patternSourceCanvas = new fabric.StaticCanvas();
var to_set_width = canvas.getActiveObject().width; // avtorkoda
img.set({opacity: 0.9});
img.scaleToWidth(to_set_width);
w.fills.push(img);
patternSourceCanvas.add(img);
patternSourceCanvas.setDimensions({
width: to_set_width,// на ноуте клиента работает с этим. у меня без может)
height: Math.floor(to_set_width)
});
var texture = patternSourceCanvas.getElement();
var pattern = new fabric.Pattern({
source: texture,
repeat: 'no-repeat',
offsetX: 0,
offsetY: 0
});
var activeObject = canvas.getActiveObject();
var activeGroup = canvas.getActiveGroup();
activeObject.setFill(pattern);
img.scaleToHeight(40);
canvas.renderAll();
});
},
Thanks in advance.
A bit late to the party:
The documentation doesn't specify this, but in order to change the pattern width after you've applied it, you must disable caching on the object that the pattern was applied upon.
In your case:
activeObject.set('objectCaching', false);
Another place where it can be observed (from FabricJS's own example here):
canvas.add(new fabric.Polygon([
{x: 185, y: 0},
{x: 250, y: 100},
{x: 385, y: 170},
{x: 0, y: 245} ], {
left: 0,
top: 200,
angle: -30,
fill: pattern,
objectCaching: false
}));
You either do it like this, or you can make objectCaching false as a default for all the objects (not recommeded for heavy projects)

draw tokens in the circle with jointjs

I want to draw some tokens (small circle) in the circle via jointjs, how can I do it ?
This code draw a circle with the text "token" and I want to replace "token" by a circle.
var place =
new joint.shapes.basic.Circle({
id:'place1',
position: {x:100, y: 180},
attrs: {circle: {fill: '#FFFFFF'}, text: {text:'TOKEN', fill:'#000000'}}
});
This looks like a good candidate for the JointJS Petri Net shapes plugin (joint.shapes.pn.js). See a demo at: http://jointjs.com/demos/pn. You can download the plugin from here: http://jointjs.com/download. Then use:
var place = new joint.shapes.pn.Place({
position: { x: 140, y: 50 },
tokens: 1
});

how to pull Line/Polygon by one of the points in kineticjs?

Some part of my code here:
var stage = new Kinetic.Stage({
container: "canvas",
width: 300,
height: 200
});
var layer = new Kinetic.Layer({
});
var line = new Kinetic.Polygon({
id: 'wall',
points: [50, 50, 100, 50, 100, 100, 50, 100],
stroke: "black",
strokeWidth: 4,
draggable: true
});
line.on('dragmove', function(mouseEvent) {
line.getPoints()[2] = {x:mouseEvent.x, y:mouseEvent.y};
layer.draw();
});
stage.add(layer);
layer.add(line);
layer.draw();
​The task is to drag polygon by one of the corners (in example by right-bottom). But actually result is not that I expected. What is wrong in my code? or what is correct way of moving elemten by one of the points?
Check out this post iOS6 pull/drag border on circle
The effects are similar, I think, to what you're looking for. You could animate the drag on any of your corners by detecting the click/touch location.
Let me know if you need another example.

Resize Image object for Shape fill in KineticJS

I have an Image() object, which I need to resize. I am using it to fill a shape in canvas.
If I try to change it like image.width = 300, it doesn't resize. If I console.log it, it shows that only the html attribute has been changed.
Is there a way to edit the Image() size directly?
You can do this using the setting the fill.scale object with the properties fill.scale.x and fill.scale.y that you wish to apply to your image.
In the example, this could be done, for example like:
var patternPentagon = new Kinetic.RegularPolygon({
x: 220,
y: stage.getHeight() / 2,
sides: 5,
radius: 70,
fill: {
scale: { x:0.5, y:0.5 },
image: images.darthVader,
offset: [-220, -70]
},
stroke: 'black',
strokeWidth: 4,
draggable: true
});
You can see an example of this working here

Categories