Can someone help me on this? I tried to shrink the size of the svg to half of its original size.
Here is the JSfiddle link
http://jsfiddle.net/wildleaf/ntzf3/
It runs fine with the original but if I uncomment the last line, the size is reduced to half but shape is changed.
You need to add transformation, not overwrite it.
See updated fiddle http://jsfiddle.net/ntzf3/1/
Code
...
var rsr = Raphael("canvas", 800, 400);
var elements = rsr.set();
for (var room in floorData) {
var r = floorData[room];
var ele = rsr.add([r]);
elements.push(ele);
if (r.data) {
ele.data('room', r.data['room']);
}
}
elements.forEach(function (el) {
var e = el[0];
e.transform(e.transform() + "s0.5,0.5,0,0");
});
Figured it out. It is overwriting the transform information in the original graph. I changed the last line to elements.transform("...s0.5,0.5,0,0") then everything works.
Related
Basically the problem is that after you rotate the camera, the points that are given as arguments in the callback for dragging are not what I expected. I'm guessing I have to Rotate the given points also but I just couldn't.
Can Someone explain what is going on, is this some kind of bug or what should I do in order the sprite to follow the mouse cursor?
Easiest way to explain the problem is to reproduce it:
1) Go to Phaser Example Runner
2) Copy- Paste this code:
var config = {
type: Phaser.WEBGL,
parent: 'phaser-example',
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png');
}
function create ()
{
var image = this.add.sprite(200, 300, 'eye').setInteractive();
this.cameras.main.setRotation(Math.PI);
image.on('pointerover', function () {
this.setTint(0x00ff00);
});
image.on('pointerout', function () {
this.clearTint();
});
this.input.setDraggable(image);
this.input.on('dragstart', function (pointer, gameObject) {
gameObject.setTint(0xff0000);
});
this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
console.log(`x: ${dragX}, y: ${dragY}`);
gameObject.x = dragX;
gameObject.y = dragY;
});
this.input.on('dragend', function (pointer, gameObject) {
gameObject.clearTint();
});
}
3) Open the console, drag around the Eye and look at what coordinates are given.
4) If you remove line 24 (the rotation of the camera) Everything works as expected.
(The example is taken from Phaser 3 Official examples and a bit changed for the bug)
According to Phaser's API Documentation on the setRotation() method, the rotation given in radians applies to everything rendered by the camera. Unfortunately, your pointer isn't rendered by the camera so it doesn't get the same rotated coordinates. Not sure if this is a bug with the library or just a poorly documented exception, but I believe there is a workaround.
Create 2 variables to hold an initial position and a final position:
var image = this.add.sprite(200, 300, 'eye').setInteractive();
var initial = [];
var final = [];
Populate the initial position in your .on('dragstart') method:
this.input.on('dragstart', function (pointer, gameObject) {
initial = [
gameObject.x,
gameObject.y,
pointer.x,
pointer.y
];
gameObject.setTint(0xff0000);
});
Then, populate the final variable in your .on('drag') method:
this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
final = [
gameObject.x, // not necessary but keeping for variable shape consistency
gameObject.y, // not necessary but keeping for variable shape consistency
pointer.x,
pointer.y
];
gameObject.x = initial[0] + (initial[2] - final[2]);
gameObject.y = initial[1] + (initial[3] - final[3]);
});
All we're doing here is keeping track of the change in pointer position and mimicking that change in our gameObject.
I have some model and want cover it with text.
I've rendered and bended TextGeometry but it is difficult to combine these two meshes.
(Аnd yes, I've tried the dynamic textures, this way prohibits the use of own fonts)
scrinshot of existing model
Perhaps there is another way to draw the text along the path?
As you want to cover it with text, why not to use textures.
You can set it from a picture with THREE.TextureLoader() or you can draw your own on a canvas and apply it to a texture with var texture = new THREE.Texture(canvas);
For exmaple:
var texture = new THREE.Texture(canvas);
texture.repeat.set(5, 1);
texture.needsUpdate = true;
See the jsfiddle example.
There you can uncomment those lines
//texture.wrapS = THREE.RepeatWrapping;
//texture.wrapT = THREE.RepeatWrapping;
and see, how the result will change.
UPD. I've updated the fiddle. Used the trick with WebFontLoader (from this SO)
WebFontConfig = {
google: {families: ['Monoton']},
active: function() {
init();
animate();
},
};
(function(){
var wf = document.createElement("script");
wf.src = 'https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.26/webfontloader.js';
wf.async = 'true';
document.head.appendChild(wf);
})();
I have built a graph with D3.js based on this example of a force-directed graph, but rather than having straight lines between the nodes I am creating curved lines using SVG path elements. The data structure for an individual link includes a source and target which represent the nodes to which the link is connected. Also the link data structure also contains a line element which contains an array of points defining the path. The data structure for a link looks like this:
{
id:4,
type:"link",
fixed:true,
source: {
id:1,
name: "A",
type:"node",
x:226,
y:190,
fixed:1,
index:0,
weight:1,
},
target: {
id:2,
name: "B",
type:"node",
x:910,
y:85,
fixed:1,
index:1,
weight:1,
},
line:[{x:387, y:69}, {x:541.5, y:179}, {x:696, y:179}]
}
Now in my on tick event handler I have the current x and y co-ordinates for for nodes A and B by means of the references d.source.x, d.source.y and d.target.x, d.target.y. I also have the initial position of node A (first element of d.line) and of node B (last element of d.line). What I am trying to do is to recalculate the points in between the first and last points based on the changes made to the positions of nodes A and B.
Here is my on tick event handler:
force.on("tick", function() {
svg.selectAll("g.node").attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
svg.selectAll("g.link .line").attr("d", function(d) {
var xOffset = 0, // Want to calculate this
yOffset = 0; // Want to calculate this
var line = [ ];
for (var i=0; i<d.line.length; i++) {
if (i==0) {
line[line.length] = { x : d.source.x, y: d.source.y }
}
else if (i==d.line.length-1) {
line[line.length] = { x : d.target.x, y: d.target.y }
}
else {
line[line.length] = { x: d.line[i].x + xOffset, y: d.line[i].y + yOffset }
}
}
return self.lineGenerator(line);
})
});
Not offsetting the x and y co-ordinates for the points in the middle of the path results in these points staying static when nodes A or B are dragged. Can anyone explain how to go about calculating xOffset and yOffset so that the path will correctly move/rotate when the nodes are dragged? Or if anyone knows of a better (read "easier"!) way of accomplishing this with D3.js then please let me know.
UPDATE:
Here is my line generator code in the chart constructor:
this.lineGenerator = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("cardinal");
Let me explain the problem with some images, hopefully they will make the problem that I am having clearer. It is not a matter of the lines being linear, my lines are curved by the line generator, but when I drag a node, I want the curve to drag as well. So all the points on the line must update to reflect the change made to the position of the node. In other words the path must not get distorted by the nodes being moved.
So, in pictures; given this situation:
If I drag node B down and to the left, I want to see something like this:
(Note that this was rotated with image editting software, hence the background is also rotated)
Instead I am getting something like this:
Note how the one intermediary point in the line has stayed static when node B was moved, causing the curve to distort. This is what I am trying to avoid happening.
Hopefully this makes the problem clearer.
i have an xml file with coordinates in it and i want to draw a line of those points on an Openlayers Map. I already have a Openlayers.Layer.Vector and i am creating a feature as follows:
var points = [];
for (var i = 0; i < coords.length; i++)
{
point = new OpenLayers.Geometry.Point(aPointsArray[i].lon, aPointsArray[i].lat);
points.push(point);
}
var geometry = new OpenLayers.Geometry.LineString(points);
var feature = new OpenLayers.Feature.Vector(geometry, null,
{
strokeColor: aColor,
strokeOpacity: 0.7,
strokeWidth: 3
});
aLayer.addFeatures([feature]);
This works a expected and i am seeing a line on my map. The problem is now, that the points i get from the .xml are changed dynamically by another program and I want to draw those changes live on my map. I already have a method that updates the maps periodically but how do i update the feature/geometry to the new points ?
Try aLayer.drawFeature(yourChangedFeature);
Is it possible to animate the images filter in Fabric.js? Such as a "pixelate" filter.
I solved it in the same way like the demo.
Unfortunately filters aren't able to be animated - they need too much processing time.
Here's my Code:
image = ... //Image, where the filter should be applied
var filter = new fabric.Image.filters.RemoveWhite({
threshold: 0,
distance: 140
});
image.filters.push(filter);
image.applyFilters(canvas.renderAll.bind(canvas));
animate(image,1, 400); //Start the Animation
function animate(image,value, stop){
value += ((stop-value)*0.02); //Change the threshold-value
if (image.filters[0]) {
image.filters[0]['threshold'] = value;
console.log(value);
image.applyFilters(canvas.renderAll.bind(canvas)); //Start creating the new image
if(value<stop-100){
setTimeout(function(){act(image,value,stop);},1);
}
}
}
I know the code isn't the most efficient one, but it works. And you can see that Animating filters consumes too much time.
(I tested it with a 1920x1080px image, maybe you can use it with smaller images)
Here is a updated version for the brightness filter
var brightnessValue = 0.9;
var brightnessFilter = new fabric.Image.filters.Brightness({
brightness: brightnessValue
});
fabricImage.filters.push(brightnessFilter);
fabric.util.requestAnimFrame(function brightnessFilterAnimation() {
brightnessValue = brightnessValue - 0.04;
brightnessFilter.brightness = brightnessValue;
fabricImage.applyFilters();
if (brightnessValue > 0) {
fabric.util.requestAnimFrame(brightnessFilterAnimation);
}
});