We Keep Coding

Is it a bug for getFeaturesAtPixel(pixel, opt_options)?

When I used this function to get features, I found that:
If the 'Style' (like image and text) of a 'Feature' is within 100 pixels of the feature's coordinate, I can get the feature by using the pixels within the 'Style';
But If the 'Style' is too far (more than 100 pixels), I cannot get the 'Feature' by using the pixels of the 'Style'.
e.g. adding the 'ol/style/Text' into a Style of a feature.
new Text({
font: '15px Microsoft YaHei',
text: '',
fill: new Fill({
color: '#222'
}),
backgroundStroke: new Stroke({
color: 'rgba(0,0,0,0.5)',
width: 1
}),
backgroundFill: new Fill({
color: 'rgba(0,250,154,0.3)'
}),
textAlign: 'middle',
textBaseline: 'middle',
offsetX: 200,
offsetY: 200
})

I have found solution in github:
By default, OpenLayers only considers an area of 100 pixels around a feature for hit detection. When you use an offset of 200 pixels. you are outside of that region. To fix it, configure your layer with a renderBuffer with an appropriate size.

Customize JointJS ports from circle to rectangle

I am currently working with Jointjs.
How can we change the shape of ports from circle to rectangle.
I want the other functionalities to work as same.Just change in the way they look.
Is it possible?

We can customize the shapes of port.Following is the code sample for rectangular port , which was working for me.
ports: {
groups: {
'myPorts': {
position: 'top',
attrs: {
'.port-body': {
stroke: 'red',
strokeWidth: 2,
height: 10,
width: 10,
magnet: true
}
},
markup: '<rect class="port-body"/>'
}
},
items: [{
group: 'myPorts'
}],
}

Resize nodes in vis js which has label inside e.g. Circle, Box

How to set size of shapes in vis js which can have label inside?
e.g.
Code1:
shape: 'circle',
color: {
border: 'black',
background: 'white'
},
borderWidth: 1,
borderWidthSelected: 2,
in above Code1, if there is nothing in label to put in shape circle, then how i can increase/decrease the size of same. If shape is anything for which label is put outside we can increase and decrease the size of icons. e.g.
Code2:
shape: 'icon',
icon: {
face: 'FontAwesome',
code: '\uf1db',
size: 100,
color: '#000000'
}
As in above Code2 for icon 'size' option is available.Is there any way to use 'size' option in Code1?

The documentation states
"...The size is used to determine the size of node shapes that do not
have the label inside of them. These shapes are: image, circularImage,
diamond, dot, star, triangle, triangleDown, square and icon..."
So the answer is no. (Details can be found here https://visjs.github.io/vis-network/docs/network/nodes.html)
But as an workaround you could do something like this:
shape: 'circle',
scaling: {
label: {
enabled: true,
min: 50,
max: 50
}
},
value: 1
Where as with the scaling.label.min and scaling.label.max property, you could, change the size of the node. (but you will need a value, for the node) I hope this helps.

Changing the color of a background with highcharts.js

I’m trying to change the background colors of a highcharts scatter plot. I can easily change the color of the section with this code below. However, I need change the background to more than one color. Essentially I’m trying shade the area from 60-100 with dark gray and also color the area 100-120 with light gray and than 40-60 with light gray. This is going to be a confidence plot, so I feel as if this is a feature that should be fairly common but I cannot find a solution.
this code adds a light gray background to the plot..
plotBands: [{
from: 60,
to: 100,
color: '#d9d9d9'
}]
Fiddle: Fiddle Here...

Just pass another object to plotBands array:
Updatated fiddle: http://jsfiddle.net/osevj9m3/1/
plotBands: [{
from: 60,
to: 100,
color: '#d9d9d9'
},
{
from: 100,
to: 120,
color: '#333'
}]

Simply modify your plotBands to be
plotBands: [{
from: 60,
to: 100,
color: '#d9d9d9'
},{
from: 40,
to: 10,
color: '#d0d9d9'
}],
Thanks,
-K

adding an editable text layer to a canvas using kineticjs

I am having some trouble in adding text from an input box into my canvas, I have successfully added another layer, however my text doesn't seem to add to the canvas and I am baffled as to why not.
I have included a JSfiddle link,
Any help would be greatly appreciated,
Melissa
$("#addbutton").click(function () {
// simple label
var label = new Kinetic.Label({
x: 20,
y: 20,
draggable: true
});
label.add(new Kinetic.Tag({
fill: 'green'
}));
label.add(new Kinetic.Text({
text: $("#newtext").val(),
fontFamily: 'Verdana',
fontSize: 18,
padding: 10,
fill: 'white'
}));
textLayer.add(label);
textLayer.draw();
});