Develop Reference

how to draw adjustable Right Angle Using Fabric.js

I am trying to Draw a Right Angle using Rectangles.
My Problem is instead of Using two Rectangles to Draw the Adjustable Right Angle,I want to use a Exact Right Angle as in this Image
I am using the Below code to add the Rectangle using fabric.js
addRect = () => {
this.canvas.add(new fabric.Rect({
left: this.canvas.width / 2,
top: this.canvas.height / 2,
fill: '#ffa726',
width: 100,
centeredRotation: true,
height: 100,
originX: 'center',
originY: 'center',
strokeWidth: 0
}));
}
Kindly Help me to solve this issue.

You can't use a Rect to get just a right angle, but you can use a Polyline. Here's an example:
const points = [
{x: 5, y: 15},
{x: 95, y: 15},
{x: 95, y: 85},
]
const options = {
strokeWidth: 20,
stroke: 'orange',
fill: null,
strokeLineJoin: 'miter',
strokeLineCap: 'butt'
}
const rightAngle = new fabric.Polyline(points, options)
canvas.add(rightAngle)
If you want to interactively adjust the points, you could adapt the code from the custom controls example on the Fabric.js site (Polygon and Polyline are similar).

is it possible to add a legend for bubble size in high charts?

I'm using the latest version of high charts. I successfully created a 3d bubble chart following http://www.highcharts.com/demo/bubble-3d
I am wondering if I can add to the legend a reference to what the size of the bubble means. Just a simple bubble with some text next to it would be enough.
Thanks in advance for your help.

Just add an empty series and name it.Give it desired name ,See Updated fiddle here
{
name :"description",
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
]
}
}}

Representing bubble size in a legend is not currently a feature of Highcharts.
You can draw one manually:
Add a series for the legend
Draw a rendered box around the legend
JSFiddle
Add a series for the legend
series: [{
// This series gives a legend for reference
data: [{
color: Highcharts.getOptions().colors[0],
x: 86,
y: 25,
z: 10,
dataLabels: {
format: '10%',
y: 40
}
}, {
x: 90,
y: 25,
z: 15,
dataLabels: {
format: '15%',
y: 40
}
}, {
x: 94,
y: 25,
z: 35,
dataLabels: {
format: '35%',
y: 40
}
}]
}, {
color: Highcharts.getOptions().colors[0],
data: [{
x: 95,
y: 95,
z: 13.8,
name: 'BE',
country: 'Belgium'
}, {
Draw a rendered box around the legend
events: {
load: function() {
// Draw the flow chart
var ren = this.renderer,
colors = Highcharts.getOptions().colors;
// Script label
ren.label('Obesity Rate', 410, 220)
.attr({
stroke: '#777',
'stroke-width': 1,
padding: 5,
r: 5,
width: 168,
height: 73
})
.css({
color: '#333',
textAlign: 'center',
fontSize: '1.1em'
})
.add();
}
}

Animate "fillLinearGradientColorStops" of a shape

How can I animate fillLinearGradientColorStops of a KineticJS Rect? I tried using a tween but surely it doesn't work.
The rectangle:
var rect = new Kinetic.Rect({
x: 20,
y: 20,
width: 100,
height: 100,
fillLinearGradientStartPoint: { x: -50, y: -50 },
fillLinearGradientEndPoint: { x: 50, y: 50 },
fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
});
The tween:
var tween = new Kinetic.Tween({
node: rect,
duration: 2,
easing: Kinetic.Easings.Linear,
fillLinearGradientColorStops: [0, 'black', 1, 'green']
});
tween.play();
Please see the fiddle http://jsfiddle.net/ZdCmS/. Is it not possible?

From there: https://github.com/ericdrowell/KineticJS/issues/901
You can use an external tweening library, like GreenSock (http://www.greensock.com/gsap-js/) with it's ColorProps plugin (http://api.greensock.com/js/com/greensock/plugins/ColorPropsPlugin.html) to tween colors and then apply them to the Kinetic shape on each frame update: http://jsfiddle.net/ZH2AS/2/
No plans for direct support of tweening color stops on a gradient fill.
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var linearGradPentagon = new Kinetic.RegularPolygon({
x: 150,
y: stage.height() / 2,
sides: 5,
radius: 70,
fillLinearGradientStartPoint: {
x: -50,
y: -50
},
fillLinearGradientEndPoint: {
x: 50,
y: 50
},
fillLinearGradientColorStops: [0, 'white', 1, 'black'],
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(linearGradPentagon);
stage.add(layer);
//activate ColorPropsPlugin
TweenPlugin.activate([ColorPropsPlugin]);
//object to store color values
var tmpColors = {
color0: 'white',
color1: 'black'
};
//tween the color values in tmpColors
TweenMax.to(tmpColors, 5, {
colorProps: {
color0: 'black',
color1: 'red'
},
yoyo: true,
repeat: 5,
ease:Linear.easeNone,
onUpdate: applyProps
});
function applyProps() {
linearGradPentagon.setAttrs({
fillLinearGradientColorStops: [0, tmpColors.color0, 1, tmpColors.color1]
});
layer.batchDraw();
}

Add listener to a group

How i can do something like this? all the shapes in the group should not listen to the event, but the group should operate on the event, but do not work. I gave the example of the two groups, and they are actually very much, and so I have to add a listener to the layer, and listen to the babbling events all internal groups.
var stage = new Kinetic.Stage({
container: 'container',
width: 1000,
height: 800
});
var layer = new Kinetic.Layer();
var group1 = new Kinetic.Group({listening: true});
var group2 = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
listening: false,
fillLinearGradientStartPoint: {x:70, y:-70},
fillLinearGradientEndPoint: {x:70,y:70},
fillLinearGradientColorStops: [0, 'black', 1, 'white'],
stroke: 'black',
strokeWidth: 4
});
var circle2 = new Kinetic.Circle({
x: 100,
y: 100,
radius: 70,
listening: false,
fillLinearGradientStartPoint: {x:70, y:-70},
fillLinearGradientEndPoint: {x:70,y:70},
fillLinearGradientColorStops: [0, 'black', 1, 'white'],
stroke: 'black',
strokeWidth: 4
});
var circle3 = new Kinetic.Circle({
x: 300,
y: 300,
radius: 70,
listening: false,
fillLinearGradientStartPoint: {x:70, y:-70},
fillLinearGradientEndPoint: {x:70,y:70},
fillLinearGradientColorStops: [0, '#678345', 1, '#824444'],
stroke: 'black',
strokeWidth: 4
});
var circle4 = new Kinetic.Circle({
x: 200,
y: 200,
radius: 70,
listening: false,
fillLinearGradientStartPoint: {x:70, y:-70},
fillLinearGradientEndPoint: {x:70,y:70},
fillLinearGradientColorStops: [0, '#678345', 1, '#824444'],
stroke: 'black',
strokeWidth: 4
});
group1.add(circle);
group1.add(circle2);
group2.add(circle3);
group2.add(circle4);
// add the triangle shape to the layer
layer.add(group1);
layer.add(group2);
layer.on("click",onClick);
// add the layer to the stage
stage.add(layer);
function onClick(e){
console.log("click",e.target);
}
Please help!

Only nodes in a group will trigger events
your circles will trigger events
clicking in a non-node area of a group will not trigger any events
A workaround is to add a transparent rect as a background covering the entire group width/height.
var group=new Kinetic.Group({
x:0,y:0,width:100,height:100
})
var groupListener=new Kinetic.Rect({
x:group.x(),
y:group.y(),
width:group.width(),
height:group.height(),
});
group.add(groupListener);
Then you can assign a listener to the "invisible" groupListener rectangle
groupListener.on("click",function(){
console.log("clicked on non-node area of group");
});
A Demo: http://jsfiddle.net/m1erickson/ur6be/

KineticJS - Creating a Spline with a Gradient Stroke

I'm trying to stroke my Kinetic Spline object with a gradient instead of a solid color. However, my spline is turning out black. Any ideas?
Here's my code:
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var blueSpline = new Kinetic.Spline({
points: [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}, {
x: 500,
y: 109
}, {
x: 300,
y: 109
}],
strokeWidth: 10,
lineCap: 'round',
tension: 1,
fillLinearGradientStartPoint: [73, 160],
fillLinearGradientEndPoint: [300, 109],
fillLinearGradientColorStops: ['#ff0000', '#00ff00'],
fillPriority: 'linear-gradient'
});
layer.add(blueSpline);
stage.add(layer);

You can try this:
var ctx = layer.getContext();
var grad = ctx.createLinearGradient(73, 160, 300, 109);
grad.addColorStop(0, '#ff0000');
grad.addColorStop(1, '#00ff00');
var blueSpline = new Kinetic.Spline({
...
stroke: grad,
...
});
Here is an example:
http://jsfiddle.net/qK6nq/

KineticJS does not support gradient strokes--only gradient fills.