We Keep Coding

How to blur a closed path element in Paper.js?

Is it possible to blur a closed path element that has a fill using paperjs? Would I have to create an SVG feGaussianBlur primitive for each path that I wanted to blur? How would that affect performance if there were a few hundred path elements on the canvas? I thought about making use of the shadowBlur with some color magic, where the shadow would match the selected path, but it's not quite the same effect. I do not want to use raster.

A trick could be to use the shadowBlur property of the item.
The only thing is that the shadow is only drawn if the item has a fill.
And we don't want the fill to be displayed but only the shadow.
So we could make clever usage of blend modes to hide the fill but not the shadow.
Here's a simple sketch demonstrating this.
new Path.Circle({
center: view.center,
radius: 50,
shadowColor: 'black',
shadowBlur: 20,
selected: true,
// set a fill color to make sure that the shadow is displayed
fillColor: 'white',
// use blendmode to hide the fill and only see the shadow
blendMode: 'multiply',
});
edit
This technique indeed seems to reach a limit when trying to stack items on top of each other.
We can prevent the multiply blend mode from "bleeding out" by wrapping the item into a group which has a blend mode of source-over. This has the effect to scope the children blend modes.
But there is still a trick to find to compose the items together.
Here's a sketch demonstrating where I stopped my investigation.
I'm quite sure that you can find a solution following this track.
function drawBlurryCircle(center, radius, blurAmount, color) {
const circle = new Path.Circle({
center,
radius,
shadowColor: color,
shadowBlur: blurAmount,
// set a fill color to make sure that the shadow is displayed
fillColor: 'white',
// use blendmode to hide the fill and only see the shadow
blendMode: 'multiply'
});
const blurPlaceholder = circle
.clone()
.set({ shadowColor: null, fillColor: null })
.scale((circle.bounds.width + (blurAmount * 2)) / circle.bounds.width);
return new Group({
children: [circle, blurPlaceholder],
blendMode: 'source-over'
});
}
drawBlurryCircle(view.center, 50, 20, 'red');
drawBlurryCircle(view.center + 30, 40, 30, 'lime');
drawBlurryCircle(view.center + 60, 30, 30, 'blue');

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)

How to create circle to outer of circle in line of chart in c3.js?

I started to learn C3.js. It is pretty good to work with.
I got stuck in this part, I hope anyone can help me to go forward .
How to create circle in outer of circle in line chart using c3.js .
This is my example code
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 150, 150, 250],
['data12', 30, 200, 100, 150, 150, 250]
],
type: 'line'
},
});
It is giving one small circle ( Dot kind of ) but I want to create one more circle with different color and inside of that circle I need to show this small circle (Dot Kind of ) .
How to do that?
I have tried to select all circle and apply border for that .I have tried like this
d3.selectAll('circle').each(function(){
this.style('border-radius: 20px;');
});
this is wrong way, also this is not working. How to do that ?
Is it possible in c3.js?

You can set the size of your point using chart options
...
point: {
r: 20
}
...
and you can draw a border by using CSS
#chart .c3-circle {
stroke: black;
stroke-width: 4;
}
(assuming you are drawing the chart in a container with ID chart)
Fiddle - http://jsfiddle.net/yhz8k5k9/

d3.js find the path of a given object

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);
});

How to add raphaeljs object in <div> tag

$(document).ready(function(){
$("#btnAO").live("click", function(){
$("#canvasdiv").append("<div id='id1' width='50px' height='50px'></div>");
$("#id1").append(new Raphael(document.getElementById('canvasdiv'), 900, 600).rect(30, 50, 80, 100).attr({
fill : "blue",
stroke : "black",
strokeWidth : 0,
r : 5
}));
});
});
i have tried this its add Raphael object in but it wont display on screen

Raphael renders into the container that you give it as the first argument. The return value is a Raphael paper object which you use for rendering. In short, just cut away $("#id1").append and it shows up.
$(document).ready(function(){
$("#btnAO").live("click", function(){
$("#canvasdiv").append("<div id='id1' width='50px' height='50px'></div>");
var paper = new Raphael(document.getElementById('canvasdiv'), 900, 600);
paper.rect(30, 50, 80, 100).attr({
fill : "blue",
stroke : "black",
strokeWidth : 0,
r : 5
});
});
});
Further more, since you're using jQuery anyway, you might want to replace document.getElementById('canvasdiv') with $('#canvasdiv').get(0) for consistency.

new keyword is not needed
var paper = Raphael(document.querySelector(target_css_selection_str), svg_width_int, svg_height_int);
Since you ask about what it returns. It returns a Paper object, which holds a reference to the new SVG element that it just built, via a property it calls "canvas".
...you should approve #Supr as the right answer btw, I am just adding a 2 cents.