I am a newby so, I wonder if someone can point me in the right direction. I need to draw 3 concentric circles with opacity that need to appear on the screen one after the other. At present, although very faintly, I can see them all. How can I make them appear one after the other?
This is my current code:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<div id="container"></div>
<script src="kinetic-v4.3.0-beta2.js"></script>
<script>
var fadeIn = function(shape) {
var o = shape.getOpacity();
o = o + 0.05 >=0.5 ? 0.5 : o + 0.05;
shape.setOpacity(o);
shape.getLayer().draw();
if(o !== 0.4) {
setTimeout(function() {
fadeIn(shape).delay(3000*3);
}, 720);
}
};
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: '#CCCCCC',
stroke: 'yellow',
strokeWidth: 8,
opacity: 0.1
});
setTimeout(function() {
fadeIn(circle).delay(3000*3);
}, 1720);
layer.add(circle);
var circle2 = new Kinetic.Circle({
x: stage.getWidth() / 2.1,
y: stage.getHeight() / 2.1,
radius: 70,
fill: '#CCCCCC',
stroke: 'yellow',
strokeWidth: 8,
opacity: 0.1
});
setTimeout(function() {
fadeIn(circle2).delay(3000*3);
}, 5600);
// add the shape to the layer
layer.add(circle2);
var circle3 = new Kinetic.Circle({
x: stage.getWidth() / 2.2,
y: stage.getHeight() / 2.2,
radius: 70,
fill: '#CCCCCC',
stroke: 'yellow',
strokeWidth: 8,
opacity: 0.1
});
setTimeout(function() {
fadeIn(circle3).delay(3000*3);
}, 12000);
// add the shape to the layer
layer.add(circle3);
// add the layer to the stage
stage.add(layer);
</script>
</body>
</html>
You can hide the circles when you initialize them i.e. circle.hide() before you add them to layer, and then show them when your timeout-callback is called, for instance for circle2, use it like this.
setTimeout(function() {
circle2.show();
fadeIn(circle2).delay(3000*3);
}, 5600);
Related
so I have created a button which is creating a Circle on a Google map.
this.Circle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: this.map,
center: this.map.getCenter(),
radius: 100,
editable: true,
draggable: true
});
I would like to set typz() so it would be changing color of the circle to black.
typz(){
}
How to do this?
Per the documentation, you set the color using the fillColor option:
function changeColor(circle) {
if (circle.get("fillColor") == "black") {
circle.setOptions({fillColor:"red", strokeColor: "red"});
} else {
circle.setOptions({fillColor: "black", strokeColor: "black"});
}
}
proof of concept fiddle
code snippet:
function changeColor(circle) {
if (circle.get("fillColor") == "black") {
circle.setOptions({
fillColor: "red",
strokeColor: "red"
});
} else {
circle.setOptions({
fillColor: "black",
strokeColor: "black"
});
}
}
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var circle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: map.getCenter(),
radius: 100,
editable: true,
draggable: true
});
google.maps.event.addDomListener(document.getElementById('tog'), 'click', function(evt) {
changeColor(circle);
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: white;
}
#map_canvas {
height: 80%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" id="tog" value="toggle color" />
<div id="map_canvas"></div>
How can i change the height of a grid of a Piechart in Primefaces?
function skinPie() {
this.cfg.shadow = false;
this.cfg.title = '';
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false,
};
It's not clear what you meant about the height of grid of a pieChart, but here are some configurations for sizing it:
this.cfg.gridPadding = {top: 0, bottom: 10, left: 0, right: 0};
this.cfg.seriesDefaults = {shadow: true,
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
fill: false,
sliceMargin: 4,
diameter: 250,
gridLineWidth: 1.0,
showDataLabels: true
}
}
Please, let me know if that was what you wanted or, in case if it's not, explain me about what you need.
I have a page with some background image.
In body tag I have a svg element with only one inner path element.
How to add backdrop-filter to path element so it could blur background in non-rectangular shape?
$(function() {
var pattern = "M0,{offsetTop} C{ax1},{power},{ax2},{power},{width},{offsetTop} L{width},{height},0,{height}Z";
var $svg = $('svg#footer');
var $path = $svg.find('path');
var settings = {
width: 1200,
height: 200,
offsetTop: 200,
power: 200
}
settings.ax1 = settings.width / 3 * 1;
settings.ax2 = settings.width / 3 * 2;
function render() {
var newPath = pattern;
for (var i in settings) {
newPath = newPath.split('{' + i + '}').join(settings[i]);
}
$path.attr('d', newPath);
}
TweenMax.set($svg, {
force3D: true
})
var opened = false;
function open() {
if (opened) {
return
}
opened = true;
TweenMax.to(settings, 0.35, {
overwrite: true,
offsetTop: 80,
ease: Strong.easeOut,
onUpdate: render
})
TweenMax.to(settings, 1, {
power: 80,
ease: Elastic.easeOut,
onUpdate: render
})
}
function close() {
if (!opened) {
return
}
opened = false;
TweenMax.to(settings, 0.35, {
overwrite: true,
offsetTop: 200,
ease: Back.easeIn,
onUpdate: render
})
TweenMax.to(settings, 0.35, {
power: 200,
delay: 0.15,
ease: Back.easeOut,
onUpdate: render
})
}
$(window).on('mousedown touchstart', function(e) {
opened ? close() : open();
})
open();
})
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background-image: url('http://i839.photobucket.com/albums/zz314/mrkanpuc/stuffs/1PZ1.jpg');
background-repeat: no-repeat;
background-size: cover;
}
svg {
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
}
svg path {
fill: rgba(0, 0, 0, 0.5);
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<svg id="footer" viewBox="0 0 1200 200" preserveAspectRatio="none"><path/></svg>
Without doing too many changes to your code, you can achieve that by increasing your power and/or decreasing your offsetTop in the open function.
TweenMax.to(settings, 0.35, {overwrite: true, offsetTop: 80, ease: Strong.easeOut, onUpdate: render })
TweenMax.to(settings, 1, {power: 120, ease: Elastic.easeOut, onUpdate: render })
$(function() {
var pattern = "M0,{offsetTop} C{ax1},{power},{ax2},{power},{width},{offsetTop} L{width},{height},0,{height}Z";
var $svg = $('svg#footer');
var $path = $svg.find('path');
var settings = {
width: 1200,
height: 200,
offsetTop: 200,
power: 200
}
settings.ax1 = settings.width / 3 * 1;
settings.ax2 = settings.width / 3 * 2;
function render() {
var newPath = pattern;
for (var i in settings) {
newPath = newPath.split('{' + i + '}').join(settings[i]);
}
$path.attr('d', newPath);
}
TweenMax.set($svg, {
force3D: true
})
var opened = false;
function open() {
if (opened) {
return
}
opened = true;
TweenMax.to(settings, 0.35, {
overwrite: true,
offsetTop: 80,
ease: Strong.easeOut,
onUpdate: render
})
TweenMax.to(settings, 1, {
power: 150,
ease: Elastic.easeOut,
onUpdate: render
})
}
function close() {
if (!opened) {
return
}
opened = false;
TweenMax.to(settings, 0.35, {
overwrite: true,
offsetTop: 200,
ease: Back.easeIn,
onUpdate: render
})
TweenMax.to(settings, 0.35, {
power: 200,
delay: 0.15,
ease: Back.easeOut,
onUpdate: render
})
}
$(window).on('mousedown touchstart', function(e) {
opened ? close() : open();
})
open();
})
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background-image: url('http://i839.photobucket.com/albums/zz314/mrkanpuc/stuffs/1PZ1.jpg');
background-repeat: no-repeat;
background-size: cover;
}
svg {
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
}
svg path {
fill: rgba(0, 0, 0, 0.5);
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<svg id="footer" viewBox="0 0 1200 200" preserveAspectRatio="none"><path/></svg>
Quadratic Bézier curve
Another solution is to add a curved path (called quadratic Bézier curve) to your rectangle. The curve is built like this:
M{startWidth}, {startHeight} q {curvePeak}, {curveHeight}, {endWidth}, {endHeight}
startWidth - x-axis positioning of P0: x coordinate where the curve starts
startHeight - y-axis positioning of P0: y coordinate where the curve starts
curvePeak - x-axis positioning of P1: where the curve reach it's peak
curveHeight - y-axis positioning of P1: height of the curve
endWidth - x-axis positioning of P2: dimension of the curve
endHeight - y-axis positioning of P2: inclination of the curve
See also: Quadratic Bézier Curve: Calculate Points or click here for an interactive example of the quadratic Bézier curve.
Negative
This solution has some problems when using two different animations and duration, like in your case.
Strong.easeOut : 0.35s
Elastic.easeOut : 1.00s
$(function() {
var pattern = "M0,{offsetTop} C{ax1},{power},{ax2},{power},{width},{offsetTop} L{width},{height},0,{height}Z q 600, 100, 1200, 0";
var $svg = $('svg#footer');
var $path = $svg.find('path');
var settings = {
width: 1200,
height: 200,
offsetTop: 200,
power: 200
}
settings.ax1 = settings.width / 3 * 1;
settings.ax2 = settings.width / 3 * 2;
function render() {
var newPath = pattern;
for (var i in settings) {
newPath = newPath.split('{' + i + '}').join(settings[i]);
}
$path.attr('d', newPath);
}
TweenMax.set($svg, {
force3D: true
})
var opened = false;
function open() {
if (opened) {
return
}
opened = true;
TweenMax.to(settings, 0.35, {
overwrite: true,
offsetTop: 80,
ease: Strong.easeOut,
onUpdate: render
})
TweenMax.to(settings, 1, {
power: 80,
ease: Elastic.easeOut,
onUpdate: render
})
}
function close() {
if (!opened) {
return
}
opened = false;
TweenMax.to(settings, 0.35, {
overwrite: true,
offsetTop: 200,
ease: Back.easeIn,
onUpdate: render
})
TweenMax.to(settings, 0.35, {
power: 200,
delay: 0.15,
ease: Back.easeOut,
onUpdate: render
})
}
$(window).on('mousedown touchstart', function(e) {
opened ? close() : open();
})
open();
})
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background-image: url('http://i839.photobucket.com/albums/zz314/mrkanpuc/stuffs/1PZ1.jpg');
background-repeat: no-repeat;
background-size: cover;
}
svg {
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
}
svg path {
fill: rgba(0, 0, 0, 0.5);
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<svg id="footer" viewBox="0 0 1200 200" preserveAspectRatio="none"><path/></svg>
Positive
On the contrary it works great when using the same animation and duration.
Both with Elastic.easeOut : 1.00s
$(function() {
var pattern = "M0,{offsetTop} C{ax1},{power},{ax2},{power},{width},{offsetTop} L{width},{height},0,{height}Z q 600, 100, 1200, 0";
var $svg = $('svg#footer');
var $path = $svg.find('path');
var settings = {
width: 1200,
height: 200,
offsetTop: 200,
power: 200
}
settings.ax1 = settings.width / 3 * 1;
settings.ax2 = settings.width / 3 * 2;
function render() {
var newPath = pattern;
for (var i in settings) {
newPath = newPath.split('{' + i + '}').join(settings[i]);
}
$path.attr('d', newPath);
}
TweenMax.set($svg, {
force3D: true
})
var opened = false;
function open() {
if (opened) {
return
}
opened = true;
TweenMax.to(settings, 1, {
overwrite: true,
offsetTop: 80,
ease: Elastic.easeOut,
onUpdate: render
})
TweenMax.to(settings, 1, {
power: 80,
ease: Elastic.easeOut,
onUpdate: render
})
}
function close() {
if (!opened) {
return
}
opened = false;
TweenMax.to(settings, 0.35, {
overwrite: true,
offsetTop: 200,
ease: Back.easeIn,
onUpdate: render
})
TweenMax.to(settings, 0.35, {
power: 200,
ease: Back.easeIn,
onUpdate: render
})
}
$(window).on('mousedown touchstart', function(e) {
opened ? close() : open();
})
open();
})
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background-image: url('http://i839.photobucket.com/albums/zz314/mrkanpuc/stuffs/1PZ1.jpg');
background-repeat: no-repeat;
background-size: cover;
}
svg {
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
}
svg path {
fill: rgba(0, 0, 0, 0.5);
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<svg id="footer" viewBox="0 0 1200 200" preserveAspectRatio="none"><path/></svg>
I have created an svg using snapsvg. I intend to use this svg as part of a parallax background. Is my approach to using snapsvg as a parallax background correct?
var s = Snap("#svgout");
s.attr({
viewBox: "0 0 600 100"
});
//lets draw 2 rects at position 100,100 and then reposition them
var r = s.rect(100, 100, 100, 100, 20, 20).attr({
stroke: '#123456','strokeWidth': 20,fill: 'red','opacity': 0.2
});
var r = s.rect(10, 10, 100, 100, 20, 20).attr({
stroke: '#123456','strokeWidth': 20,fill: 'red','opacity': 0.2
});
var r = s.rect(200, 10, 100, 100, 20, 20).attr({
stroke: '#123456','strokeWidth': 20,fill: 'red','opacity': 0.2
});
var r = s.rect(300, 100, 100, 100, 20, 20).attr({
stroke: '#123456','strokeWidth': 20,fill: 'red','opacity': 0.2
});
var r = s.rect(400, 10, 100, 100, 20, 20).attr({
stroke: '#123456','strokeWidth': 20,fill: 'red','opacity': 0.2
});
#svgout {
width: 100%;
}
#about {
min-height: 200px;
height: 200px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#about svg {
height: 200px;
position: absolute;
text-align: center;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<header style="height:100px; background:#000">
<div>header content</div>
</header>
<section data-type="background" id="about">
<svg id="svgout"></svg>
content to add within the parrallax
</section>
<section style="height:400px ; background:#f1c40f">
<div>main content</div>
</section>
working fiddle
I really like this element,
but how to create it? I am not sure what's the correct designation of the element...
Thank you very much.
This effect can be achieved by layering a couple arc()s:
// bright blue full circle
d.beginPath();
d.arc(50, 50, 50, 0, 2 * Math.PI, false);
d.fillStyle = "#aaeeff";
d.fill();
// dark blue percentage circle
d.beginPath();
d.moveTo(50, 50);
d.arc(50, 50, 50, -0.5 * Math.PI, 0.78 * 2 * Math.PI - 0.5 * Math.PI, false);
d.fillStyle = "#00aaff";
d.fill();
// white inner filler
d.beginPath();
d.moveTo(50, 50);
d.arc(50, 50, 25, 0, 2 * Math.PI, false);
d.fillStyle = "#ffffff";
d.fill();
and finally rendering the text:
d.moveTo(50, 50);
d.fillStyle = "#606060";
d.font = "12pt sans-serif";
d.fillText("78%", 36, 56);
Fiddle: http://jsfiddle.net/j6NVg/
Instead of using the <canvas> element, I have chosen to construct the pie chart relying on CSS and JS entirely. The HTML markup is as follow:
<div class="pie" data-percent="78">
<div class="left">
<span></span>
</div>
<div class="right">
<span></span>
</div>
</div>
The CSS is as follow. The trick is to split the circle into two halves (the nested .left and .right elements). The halves will have their overflowing content hidden, and contain nested <span> that we will manipulate with JS for rotation later. Add vendor prefixes when appropriate :)
.pie {
background-color: #eee;
border-radius: 50%;
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
.pie > div {
float: left;
width: 50%;
height: 100%;
position: relative;
overflow: hidden;
}
.pie span {
background-color: #4a7298;
display: block;
width: 100%;
height: 100%;
}
.pie .left span {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.pie .right span {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.pie:before,
.pie:after {
border-radius: 50%;
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.pie:before {
background-color: #fff;
content: "";
width: 75%;
height: 75%;
z-index: 100;
}
.pie:after {
content: attr(data-percent) "%";
z-index: 200;
text-align: center;
}
I have used the following with jQuery:
$(function() {
$(".pie").each(function() {
var percent = $(this).data("percent").slice(0,-1), // Removes '%'
$left = $(this).find(".left span"),
$right = $(this).find(".right span"),
deg;
if(percent<=50) {
// Hide left
$left.hide();
// Adjust right
deg = 180 - (percent/100*360)
$right.css({
"transform": "rotateZ(-"+deg+"deg)"
});
} else {
// Adjust left
deg = 180 - ((percent-50)/100*360)
$left.css({
"transform": "rotateZ(-"+deg+"deg)"
});
}
});
});
Here is the fiddle: http://jsfiddle.net/Aw5Rf/7/
Check the below links for more info (not an exact one.But you can get some idea).
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Test</title>
</head>
<body>
<section>
<div>
<canvas id="canvas" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
<script type="text/javascript">
var myColor = ["#ECD078","#D95B43","#C02942","#542437","#53777A"];
var myData = [10,30,20,60,40];
function getTotal(){
var myTotal = 0;
for (var j = 0; j < myData.length; j++) {
myTotal += (typeof myData[j] == 'number') ? myData[j] : 0;
}
return myTotal;
}
function plotData() {
var canvas;
var ctx;
var lastend = 0;
var myTotal = getTotal();
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < myData.length; i++) {
ctx.fillStyle = myColor[i];
ctx.beginPath();
ctx.moveTo(200,150);
ctx.arc(200,150,150,lastend,lastend+
(Math.PI*2*(myData[i]/myTotal)),false);
ctx.lineTo(200,150);
ctx.fill();
lastend += Math.PI*2*(myData[i]/myTotal);
}
}
plotData();
</script>
</section>
</body>
</html>
For more info :Graphing Data in the HTML5 Canvas Element Simple Pie Charts
Another Link : Pure CSS3 Pie Charts effect
This is an online demo: http://jsbin.com/uFaSOwO/1/
First of all what you need can be done exactly using jQuery knob plugin. Still interested in a CSS Solution, than here's what I have done
<div class="load_me"></div>
.load_me {
margin: 100px;
height: 50px;
width: 50px;
border: 5px solid #f00;
border-radius: 50%;
border-top-color: transparent;
}
Demo
Animating the Knob Credits
If you want to prevent the mouse alteration, you can simply add readOnly
$this.knob({
readOnly: true
});
Demo
FIDDLE with ANIMATION
Here's my approach:
var ctx = canvas.getContext('2d');
/*
* in canvas, 0 degrees angle is on the right edge of a circle,
* while we want to start at the top edge of the circle.
* We'll use this variable to compensate the difference.
*/
var relativeAngle = 270;
function drawCanvas() {
ctx.clearRect(0, 0, 90, 90);
//light blue circle
ctx.lineWidth = 20;
ctx.strokeStyle = '#D8E8F7';
ctx.beginPath();
ctx.arc(45, 45, 35, 0, 2*Math.PI);
ctx.stroke();
//dark blue circle
ctx.strokeStyle = '#66ADF4';
ctx.beginPath();
//notice the angle conversion from degrees to radians in the 5th argument
ctx.arc(45, 45, 35, 1.5*Math.PI, ((angle + relativeAngle) / 180) * Math.PI);
ctx.stroke();
//text
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.fillStyle = '#666';
ctx.font = 'bold 14px serif';
// angle conversion to percentage value
ctx.fillText(parseInt(100 * angle / 360).toString() + '%', 45, 45);
}
var angle;
function timeout() {
angle = parseInt(360 * percent / 100);
drawCanvas();
if (angle > 360) {
document.getElementById('run').disabled = false;
percent = 0;
return;
}
percent++;
setTimeout(timeout, 10);
};
var percent = 0;
/* START the ANIMATION */
timeout();
At the bottom of the code you'll find a self evaluating function timeout which calls the drawCanvas function every 10 miliseconds and increments the blue circle angle. I hope everything is clear here. If not, feel free to ask!
Enjoy it!