I'm working with Fabric to create Radial-gradient like this
It can create very easily by css. Like this
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(ellipse at center, #1e5799 0%,rgba(255, 255, 255, 0) 100%);
}
</style>
</head>
<body>
<h3>Radial Gradient - Evenly Spaced Color Stops</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
But seem fabricJS do not support it. It only support gradient from side to side (?)
Does anyone work with this before. Please give me support.
Thank you
Yes
Some example: http://jsfiddle.net/fabricjs/58y8b/
// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');
// Do some initializing stuff
fabric.Object.prototype.set({
transparentCorners: false,
cornerColor: 'rgba(102,153,255,0.5)',
cornerSize: 12,
padding: 5
});
// Initialze the example
var rect1 = new fabric.Rect({
left: 100,
top: 100,
width: 100,
height: 100,
fill: '#ffda4f'
});
var rect2 = new fabric.Rect({
left: 250,
top: 100,
width: 100,
height: 100,
fill: 'rgb(111,154,211)'
});
var rect3 = new fabric.Rect({
left: 400,
top: 100,
width: 100,
height: 100,
fill: 'rgb(166,111,213)'
});
var rect4 = new fabric.Rect({
left: 100,
top: 400,
width: 100,
height: 100,
fill: '#ffda4f'
});
var rect5 = new fabric.Rect({
left: 250,
top: 400,
width: 100,
height: 100,
fill: 'rgb(111,154,211)'
});
var rect6 = new fabric.Rect({
left: 400,
top: 400,
width: 100,
height: 100,
fill: 'rgb(166,111,213)'
});
canvas.add(rect1, rect2, rect3, rect4, rect5, rect6);
/**
* setGradient linear gradients example
*/
// horizontal linear gradient
rect1.setGradient('fill', {
type: 'linear',
x1: -rect1.width / 2,
y1: 0,
x2: rect1.width / 2,
y2: 0,
colorStops: {
0: '#ffe47b',
1: 'rgb(111,154,211)'
}
});
// vertical linear gradient
rect2.setGradient('fill', {
type: 'linear',
x1: 0,
y1: -rect2.height / 2,
x2: 0,
y2: rect2.height / 2,
colorStops: {
0: '#ff4040',
1: '#e6399b'
}
});
// diagonal linear gradient
rect3.setGradient('fill', {
type: 'linear',
x1: -rect3.width / 2,
y1: -rect3.height / 2,
x2: rect3.width / 2,
y2: rect3.height / 2,
colorStops: {
0: 'rgb(166,111,213)',
0.5: 'rgba(106, 72, 215, 0.5)',
1: '#200772'
}
});
/**
* setGradient radial gradients example
*/
// radial gradient
rect4.setGradient('fill', {
type: 'radial',
r1: rect4.width / 2,
r2: 10,
x1: 0,
y1: 0,
x2: 0,
y2: 0,
colorStops: {
0: '#FF4F4F',
1: 'rgb(255, 239, 64)'
}
});
// radial gradient
rect5.setGradient('fill', {
type: 'radial',
r1: rect5.width / 2,
r2: 10,
x1: 0,
y1: 0,
x2: rect4.width / 4,
y2: rect4.height / 4,
colorStops: {
0: '#ffe47b',
0.5: 'rgb(111,154,211)',
1: 'rgb(166,111,213)'
}
});
// radial gradient
rect6.setGradient('fill', {
type: 'radial',
r1: 50,
r2: 80,
x1: 45,
y1: 45,
x2: 52,
y2: 50,
colorStops: {
0: 'rgb(155, 237, 0)',
1: 'rgba(0, 164, 128,0.4)'
}
});
canvas.renderAll();
You can do it like this:
let cir = new fabric.Circle({
left: 100,
top: 100,
radius: 30,
fill: 'rgba(0, 0, 0, 0)'
})
cir.setGradient('fill', {
type: 'radial',
r1: 30,
r2: 2,
x1: 30,
y1: 30,
x2: 30,
y2: 30,
colorStops: {
1: 'rgb(113,182,203)',
0: 'rgba(0, 0, 0, 0)'
}
});
fabricCanvas.add(cir);
fabricCanvas.renderAll();
http://jsfiddle.net/Kyashar/z6428pta/
Related
I want to create 3 graphs one under the other. When I move the mouse on the screen, I want to see the x value in the 3 graphs corresponding to the y value at that point. The chart I want and the outputs of my own work are as in the images. Maybe I can achieve what I want by putting a rectangle on the charts I make. But is there a more useful way or example of this?
Another problem is if I am going to continue with my own method;
When I make 3 separate charts, only the lowest one has the y axis, so there are tick counts on it. It doesn't happen in the 1st and 2nd charts. This doesn't look good either. How can I make the tick counts in the 3rd chart invisible?
When I activate the plotArea command lines and make the graphics larger and closer to each other, as in the 3rd picture, the plot description is not fully readable and 2 of the 5 numbers on the x-axis become unreadable.
for example;
output of my own code
with plotAreas open
ColumnLayout{
id: qmlWindow6GridLayout
anchors.fill: parent
ChartView {
//title: "Spline1"
id: chart1
Layout.fillWidth:true
Layout.fillHeight:true
legend.visible: true
backgroundColor: "black"
antialiasing: true
//plotArea: Qt.rect(35, 35, parent.width - 75, parent.height / 3 - 75)
SplineSeries {
//name: "Altimeter"
name: "Chart 1"
color: "red"
axisX: ValuesAxis {
visible: false
}
axisY: ValuesAxis{
labelsColor: "white"
}
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 15, 29, 00)); y: 50 }
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 15, 29, 20)); y: 100 }
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 29, 37)); y: 150 }
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 30, 20)); y: 200 }
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 45, 00)); y: 250 }
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 50, 00)); y: 300 }
}
}
ChartView {
//title: "Spline2"
id: chart2
Layout.fillWidth:true //yes, if wanted
Layout.fillHeight:true //yes, if wanted
legend.visible: true
backgroundColor: "black"
antialiasing: true
//plotArea: Qt.rect(35, 35, parent.width - 75, parent.height / 3 - 75)
SplineSeries {
name: "Chart 2"
color: "cyan"
axisX: ValuesAxis {
visible: false
}
axisY: ValuesAxis{
labelsColor: "white"
}
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 15, 29, 00)); y: 50 }
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 15, 29, 20)); y: 100 }
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 29, 37)); y: 150 }
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 30, 20)); y: 200 }
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 45, 00)); y: 250 }
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 50, 00)); y: 300 }
}
}
ChartView {
Layout.fillWidth: true
Layout.fillHeight: true
legend.visible: true
backgroundColor: "black"
antialiasing: true
//plotArea: Qt.rect(75, 75, parent.width - 125, parent.height / 3 - 125)
SplineSeries {
name: "Chart 3"
color: "purple"
axisX: DateTimeAxis {
format: "hh:mm:ss"
labelsColor: "white"
}
axisY: ValuesAxis{
labelsColor: "white"
}
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 15, 29, 00)); y: 50 }
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 15, 29, 20)); y: 100 }
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 29, 37)); y: 150 }
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 30, 20)); y: 200 }
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 45, 00)); y: 250 }
XYPoint { x: toMsecsSinceEpoch(new Date(0, 0, 0, 16, 50, 00)); y: 300 }
}
}
}
How to set the scss dynamic class name using margin values.
This is what I tried
$spaceamounts: (1, 3, 5, 8, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 110, 120, 130, 140,150,160,170,180,);
$sides: (top, bottom, left, right);
#each $space in $spaceamounts {
#each $side in $sides {
.m#{str-slice($side, 0, 1)}-#{$space} {
margin-#{$side}: #{$space}px !important;
}
.p#{str-slice($side, 0, 1)}-#{$space} {
padding-#{$side}: #{$space}px !important;
}
}
}
So I can use margin/padding class name like pt-1, mt-10
But I want to set the $spaceamounts value as 1~999.
Anyone know how to fix the code?
If you want to create a class for every values between 1 and 999, you can get rid of $spaceamounts and use a #for loop:
$sides: (top, bottom, left, right);
#for $i from 1 through 999 {
#each $side in $sides {
.m#{str-slice($side, 0, 1)}-#{$i} {
margin-#{$side}: #{$i}px !important;
}
.p#{str-slice($side, 0, 1)}-#{$i} {
padding-#{$side}: #{$i}px !important;
}
}
}
For what it's worth, I think that it's not something you should do as it will generate a massive amount of code.
I would like to transform the following list of polygons:
[
%{height: 32, width: 32, x: 0, y: 0},
%{height: 32, width: 32, x: 32, y: 0},
%{height: 32, width: 32, x: 64, y: 0},
%{height: 32, width: 32, x: 256, y: 0},
%{height: 32, width: 32, x: 288, y: 0}
]
Into a list where the adjacent polygons are joined as follows:
[
%{height: 32, width: 96, x: 0, y: 0},
%{height: 32, width: 64, x: 256, y: 0}
]
I've tried using Enum.reduce_while as follows:
Enum.reduce_while(polys, 0, fn poly, max_x ->
if poly.x - max_x <= 32, do: {:cont, max_x + 32}, else: {:halt, max_x}
end)
That works to give me the first polygon, but how do I get the subsequent polygons and is it possible to get all of them in 1 pass?
This would be a perfect use-case for Enum.chunk_while/4:
input = [
%{height: 32, width: 32, x: 0, y: 0},
%{height: 32, width: 32, x: 32, y: 0},
%{height: 32, width: 32, x: 64, y: 0},
%{height: 32, width: 32, x: 256, y: 0},
%{height: 32, width: 32, x: 288, y: 0}
]
chunk_fun = fn
i, [] -> {:cont, i}
%{width: iw, x: ix}, %{height: ah, width: aw, x: ax, y: ay}
when ax + aw == ix ->
{:cont, %{height: ah, width: aw + iw, x: ax, y: ay}}
%{height: ih, y: iy}, %{height: ah, width: aw, x: ax, y: ay}
when ay + ah == iy ->
{:cont, %{height: ah + ih, width: aw, x: ax, y: ay}}
i, acc -> {:cont, acc, i}
end
after_fun = fn
[] -> {:cont, []}
acc -> {:cont, acc, []}
end
input
|> Enum.chunk_while([], chunk_fun, after_fun)
|> IO.inspect()
#⇒ [%{height: 32, width: 96, x: 0, y: 0},
# %{height: 32, width: 64, x: 256, y: 0}]
Please note, that the example above also handles the y-axis joins. The example is interesting due to the unusual use of a map instance as an accumulator.
I'd use Enum.reduce here. Enum.reduce_while is meant for cases when you want to stop processing the list further based on some condition. You do want to process the whole list in this case.
What I do is collect polygons in the accumulator, starting with a list with only the first polygon. Then, in each reduction, I check whether the previous polygon's x + width is the same as the new polygon's x. If it is, I merge the polygons by adding the widths, if not I prepend the polygon.
The list is collected in reverse so I use Enum.reverse after the reduction.
[
%{height: 32, width: 32, x: 0, y: 0},
%{height: 32, width: 32, x: 32, y: 0},
%{height: 32, width: 32, x: 64, y: 0},
%{height: 32, width: 32, x: 256, y: 0},
%{height: 32, width: 32, x: 288, y: 0}
]
|> Enum.reduce(nil, fn
x, nil ->
[x]
x, [h | t] ->
if h.x + h.width == x.x do
[%{h | width: x.width + h.width} | t]
else
[x, h | t]
end
end)
|> Enum.reverse()
|> IO.inspect()
Output:
[%{height: 32, width: 96, x: 0, y: 0}, %{height: 32, width: 64, x: 256, y: 0}]
I do want to apply the effects similar to shown in image below using css. I tried but unable to get the shinning or overlay arc thing?
So kindly help out with:
I do had tried this but unable to apply the solution provided below.
<!Doctype html>
<html>
<head>
<title>JQ chart</title>
<link rel="stylesheet" type="text/css" href="css/jquery.jqGauges.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.jqGauges.min.js"></script>
<script lang="javascript" type="text/javascript">
var values = { v1: 80 };
$(document).ready(function () {
var background = {
type: 'linearGradient',
x0: 1,
y0: 1,
x1: 1,
y1: 0.5,
colorStops: [{ offset: 0, color: '#C4C4C4' },
{ offset:0.3,color:'black'}
]
};
var gradient1 = {
type: 'linearGradient',
x0: 0,
y0: 0.5,
x1: 1,
y1: 0.5,
colorStops: [{ offset: 0, color: '#C5F80B' },
{ offset: 1, color: '#6B8901'}]
};
var gradient2 = {
type: 'linearGradient',
x0: 0.5,
y0: 0,
x1: 0.5,
y1: 1,
colorStops: [{ offset: 0, color: '#FF3366' },
{ offset: 1, color: '#B2183E'}]
};
var anchorGradient = {
type: 'radialGradient',
x0: 0.5,
y0: 0.8,
r0: 0,
x1: 0.5,
y1: 0.8,
r1: 1,
colorStops: [{ offset: 0, color: '#797981' },
{ offset: 1, color: '#1C1D22'},
{offset:0.5, color:'#58575C'}
]
};
$('#jqRadialGauge').jqRadialGauge({
background: anchorGradient,
border: {
lineWidth: 3,
strokeStyle: '#595959',
padding: 16,
},
shadows: {
enabled: true
},
anchor: {
visible: true,
fillStyle: anchorGradient,
radius: 0.10
},
tooltips: {
disabled: true,
highlighting: false
},
scales: [
{
minimum: 0,
maximum: 140,
startAngle: 140,
endAngle: 400,
majorTickMarks: {
length: 7,
lineWidth: 2,
interval: 20,
offset: 1,
strokeStyle: '#B9BDC0'
},
minorTickMarks: {
visible: false,
length: 8,
lineWidth: 2,
interval: 2,
offset: 0.84,
strokeStyle: 'white'
},
labels: {
visible:false,
orientation: 'horizontal',
interval: 10,
offset: 1.00,
strokeStyle:'white'
},
needles: [
{
value: values.v1,
type: 'triangle',
outerOffset: 1.5,
mediumOffset: 0.7,
width: 7,
fillStyle: '#C01211'
}
]
}
]
});
updateGauge();
});
function updateGauge() {
$(values).animate({
v1: Math.round(Math.random() * 100)
},
{
duration: 600,
step: function () {
var scales = $('#jqRadialGauge').jqLinearGauge('option', 'scales');
scales[0].needles[0].value = this.v1;
$('#jqRadialGauge').jqLinearGauge('update');
},
complete: function () {
setTimeout('updateGauge()', 400);
}
});
}
</script>
</head>
<body style="background-color:black;">
<div>
<div id="jqRadialGauge" style="width: 150px; height: 150px;">
</div>
</div>
</body>
</html>
You mean something like...
.shinyCircle{
position:relative;
overflow:hidden;
background:#9F9F9F;
width:200px;
height:200px;
border-radius:50%;
border:5px solid #000;
}
.shinyCircle:after{
position:absolute;
content:"";
background: -webkit-linear-gradient(top, #333, #ccc);
background: -moz-linear-gradient(top, #333, #ccc);
background: -ms-linear-gradient(top, #333, #ccc);
background: linear-gradient(top, #333, #ccc);
width:inherit;
height:inherit;
border-radius:inherit;
top:30%;
}
<div class="shinyCircle"></div>
Can I change the size of polygon wchich I defined by points?
var pierwszy = new Kinetic.Polygon({
points: [0, 0, 150, 0, 80, 150, 0, 150],
fillPatternImage: images.img1,
stroke: 'black',
strokeWidth: 5,
});
I have tried to just change points and add to tween atriubutes, but it doesn't work.
scaleX and scaleY work very well, but the background image is bluring.
Any ideas?
I don't know if this is useful for you,In my situation is ,I want to change the shape of the polygon with a tween:
poly1= new Kinetic.Polygon({
points: [0, 0, 150, 0, 80, 150, 0, 150],
fill: shadowLightColor,
stroke: '#bbbbbb',
strokeWidth: 1
});
layer.add(poly1);
poly1.tween = new Kinetic.Tween({
node: poly1,
duration: 1,
points: [0, 0, 300, 0, 200, 150, 0, 150],
easing: Kinetic.Easings.StrongEaseInOut
}).play();