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.
Related
i'm trying rotate a body that i had created, but it's appear rotated when refresh the page, i use matter js (http://brm.io/matter-js/) and tween js (https://www.createjs.com/tweenjs), matter js don't has tween, so for that reasson i used tween js, but don´t works correctly
$(document).ready(function() {
//walls
barra_izquierda_vaso_moleculas = Bodies.rectangle(200,200,10,200,{isStatic: true});
barra_derecha_vaso_moleculas = Bodies.rectangle(500,200,10,200,{isStatic: true});
barra_inferior_vaso_moleculas = Bodies.rectangle(350,300,300,10,{isStatic: true});
//construction of my body
vaso_moleculas = Body.create({
parts: [barra_izquierda_vaso_moleculas, barra_derecha_vaso_moleculas, barra_inferior_vaso_moleculas],
restitution: 0,
friction: 0,
frictionStatic: 0,
frictionAir: 0,
inertia: Infinity,
mass: 1,
isStatic: true,
});
// add to world
World.add(world, vaso_moleculas);
//tween
createjs.Tween.get(vaso_moleculas).to(2, 9000);
});
You can draw your shape using p5.js and in your draw() loop, set your background with a lower alpha, such as background( 0, 32 ). This will create the illusion of motion blur or tweening. You can see it here, kind of.
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)
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 :)
I am trying to setup a seesaw with userdragable objects. After world creation in PhysicsJS, mouse drag interaction is added by
world.add( Physics.behavior('interactive', { el: renderer.el }) );
which works fine. Subsequently, I want some added objects to be draggable (the box objects). But the lever should not be draggable, but it should interact with the boxes. So the lever should rotate according to a replaced box. The fulcurm is placed in a noninteractive way by setting its treatment property to static:
world.add( Physics.body('convex-polygon', {
name: 'fulcrum',
x: 250,
y: 490,
treatment: 'static',
restitution: 0.0,
vertices: [
{x: 0, y: 0},
{x: 30, y: -40},
{x: 60, y: 0},
]
}) );
How can objects be interacting with each other, but only some are userdragable?
A fiddle is available at: http://jsfiddle.net/YM8K8/
At the moment this is not supported... but it should be. I've added it as a bug on github. https://github.com/wellcaffeinated/PhysicsJS/issues/101
In the meantime, if you want, you can create a new "interactive" behavior by copying and pasting and just change the name.
Physics.behavior('interactive-custom', function( parent ){ ...
Then in the grab function just make this small addition:
body = self._world.findOne({ $at: new Physics.vector( pos.x, pos.y ) });
Change to:
body = self._world.findOne({ $at: new Physics.vector( pos.x, pos.y ), $in: self.getTargets() });
What that does is when it's searching for the body at the mouse coordinates, it will also check to see if that body is in the set that you've applied this behavior to.
Then instead of adding the behavior before the bodies in your fiddle, add it at the end, and do this:
world.add(
Physics.behavior('interactive-custom', { el: renderer.el })
.applyTo(world.find({ name: 'box' }))
);
This will use world.find to find the bodies currently in the world that have the "box" name. Then it sends that array of bodies to the behavior and tells the behavior to only apply itself to those bodies.
Here's the modified fiddle:
http://jsfiddle.net/wellcaffeinated/YM8K8/1/
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