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)
Related
In Raphael, I have an ellpise drawn:
var leftball = paper.ellipse(125, 120, 20, 20);
In my attempt in a mouseclick event, I would like the ellipse to change shape and value to:
leftball = paper.ellipse (125, 120, 20, 40);
Anyone can guide me to this?
I am able to animate something similar using paper.path by defining the values of the path as a string. However, as I tried to use the same method for ellipse, it does not work. My coding:
var leftball = "125, 120, 20, 20";
var myleftball = paper.ellipse(leftball).attr({fill:"black"});
The error on console mentioning:
Error: Invalid value for <ellipse> attribute cx"125, 120, 20, 20"
Thank you!
You just need to specify the individual attribute to animate, eg 'ry', as its not a path string.
Example
leftball.animate({ ry: 40 }, 2000);
jsfiddle
I'm looking to see if there's a utility way to take a given svg element and find the corresponding path. The intent is to be able to trace an outline of the object similar to http://jsfiddle.net/Lqmzztw1/. I'd like to use a technique illustrated http://bl.ocks.org/duopixel/4063326 here since it seems to be close to what I want. I'm looking for this to be able to trace the outline of any polygon/shape/circle, etc. Is there a way to convert a given SVG element to its corresponding path in d3?
fiddle code
var svg = d3.selectAll('div').append('svg').attr({
height:500,
width: 500
});
var box = svg.append('rect').attr({
x: 20,
y: 20,
height:50,
width:50,
fill: 'blue'
});
box.on('click',function(){
var cornerBox = svg.append('rect').attr({
x:15,
y:15,
width:10,
height:10,
fill:'orange'
});
cornerBox.transition().attr({
x: 50+15
}).duration(150).transition().attr({
y: 50+15
}).transition().attr({
x:15
}).duration(150).transition().attr({
y:15
}).duration(150);
});
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 :)
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.
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