I'm using Highcharts SVG rendering API (Renderer) to draw custom chart and I want to animate rect's stroke-width attribute. Here is the example provided in Highcharts documentation, but it seems not working properly - all attributes are changed except stroke-width.
If I open HTML in Chrome DevTools I can see something like that:
<rect x="50" y="50" width="200" height="20" rx="5" ry="5" stroke="gray"
stroke-width="2" fill="silver" zIndex="3" strokeWidth="10"></rect>
Stroke-width is set using camel-style name, not dash-style name.
May be there is some workaround?
Yep, there is a workaround. You can achieve this by using the attr() function of jQuery. When you click on the rectangle you change the stroke-width attribute.
Still I think this is a good point to report perhaps as a bug of the API?
Anyways the JS code will look like this:
$(function () {
var renderer = new Highcharts.Renderer(
$('#container')[0],
400,
300
),
rect = renderer.rect(100, 100, 100, 100, 5)
.attr({
'stroke-width': 2,
stroke: 'gray',
fill: 'silver',
zIndex: 3
})
.on('click', function () {
rect.animate({
x: 50,
y: 50,
width: 200,
height: 20
})
$("rect").attr("stroke-width", "30"); // here you can change the stroke-width
})
.add();
});
To see it in action here the adjusted JSFIDDLE
VERSION 2
Based on your comment I edit the code. In this case you set also an animation for the stroke-width. This is a simple solution. Another solution would be tweaking the original Highcharts library which I would not recommend. Anyways, hope it helps:
$(function () {
var renderer = new Highcharts.Renderer(
$('#container')[0],
400,
300
),
rect = renderer.rect(100, 100, 100, 100, 5)
.attr({
'stroke-width': 2,
stroke: 'gray',
fill: 'silver',
zIndex: 3
})
.on('click', function () {
rect.animate({
x: 50,
y: 50,
width: 200,
height: 20
})
$("rect").animate(
{ "stroke-width": "10" },
{
duration: 500,
step: function(now) { $(this).attr("stroke-width", now); }
});
})
.add();
});
The duration can be adjusted to what is suitable for you.
See it in action here: JSFIDDLE
Related
I have the following code which when you click the gray semi-circle there are two animations that happen, I am very close to my intended outcome, however the line path animation animates about a point but that point seems to move at the end, I would like it to rotate about it's endpoint so that i doesn't move out of the circle that endpoint is in.
It is much clearer in the jsfiddle to see what I am talking about and the issue at hand.
** You have to click the gray circle to activate the animation **
console.clear();
var loop = "M31,201.1C16.6,118.8,69.1,40.5,150.7,26c32.5-5.8,64.5-1.6,93.7,14.5c59.1,32.6,88.4,94,77.1,159.1";
var pin = "M180.4,193.3c-1.8,0-3.5-0.9-4.4-2.6c-1.3-2.4-0.5-5.5,2-6.8L309.8,111c2.4-1.3,5.5-0.5,6.8, 2c1.3,2.4,0.5,5.5-2,6.8l-131.8,72.9C182.1,193.1,181.2,193.3,180.4,193.3z";
var circle_svg = "M-224.1,227.9c-5.1,5.1-5.1,13.4,0,18.5s13.4,5.1,18.5,0s5.1-13.4,0-18.5C-210.8,222.8-219,222.8-224.1,227.9z";
var loopLength = Snap.path.getTotalLength(loop);
console.log(loopLength);
var s = Snap();
circle = s.path({
path: loop,
fill: "gray",
stroke: "#c00",
strokeWidth: 0,
strokeLinecap: "round"
});
var g = s.gradient("l(0, 0, 1, 1)#80DFFE-#0CA5EE-#07A3EE");
circleOutline = s.path({
path: Snap.path.getSubpath(loop, 0, 0),
stroke: g,
fillOpacity: 0,
strokeWidth: 0,
strokeLinecap: "round"
});
circle_middle = s.path({
path: circle_svg,
stroke: "#000000",
fill: "#ffffff",
strokeWidth: 5,
});
pin_line = s.path({
path: pin,
fill: "#000000"
});
// +"t"+[translateX,translateY]
circle_middle.attr({
transform: "t" + [400, -65]
});
pin_line.attr({
transform: 'r-170,180,180'
});
circle.click(function(e) {
Snap.animate(0, loopLength,
function(step) { //step function
circleOutline.attr({
path: Snap.path.getSubpath(loop, 0, step),
strokeWidth: 25
});
}, // end of step function
800 //duration
); //Snap.animate
pin_line.animate({
transform: 'r30,180,180',
translate: '20, 20, 85, 85'
}, 1000);
}); //click the circle
svg {
height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
So there was indeed an alignment issue, and I tried to fix that in Illustrator, then came back to your example, and realized how some of those transforms in the JS actually work, and was able to adjust them to finally look correct, but when I tried just adjusting the transforms using your paths, I couldn't get it right, even when applying t(ranslations) to the pin_line in addition to rotations. So it's either a combination of the paths needing to be replaced with some fine-tuning of that rotation points, or it's that I just don't fully understand how to work the snapsvg code. :) In any case, I got a fiddle working that incorporates some of my new path coordinates made in Illustrator and some changes to the JS: https://jsfiddle.net/14e107mt/4/ In addition to the paths changing, it comments out the translation of circle_middle's translation (since it's now aligned there by default), and changes the pin_line rotation coordinates to
pin_line.attr({ transform: 'r-170 176 172' });
and
pin_line.animate({ transform: 'r30 176 172' }, 1000 );
instead of 180 180.
I am using this jquery plugin by LugoLabs called "Circles" in order to animate a few pie charts on a website I am building. (https://github.com/lugolabs/circles)
It works perfectly, but the pie chart animation starts on page load and I want to delay it until it is seen by the viewer.
Would it be possible to use something like viewportchecker.js (https://github.com/dirkgroenen/jQuery-viewport-checker) to only start the animation once someone is viewing it? I've used this before on other projects with success, but I'm having a hard time integrating it with the existing javascript.
----Example setup---
HTML:
<div class="circle" id="circles-1"></div>
SCRIPT:
var myCircle = Circles.create({
id: 'circles-1',
radius: 60,
value: 43,
maxValue: 100,
width: 10,
text: function(value){return value + '%';},
colors: ['#D3B6C6', '#4B253A'],
duration: 400,
wrpClass: 'circles-wrp',
textClass: 'circles-text'
styleWrapper: true,
styleText: true
});
As previously mentioned as comment: The circles github has an example for starting the circles animation when the circle is in view: https://github.com/lugolabs/circles/blob/master/spec/viewport.html.
I've added a Fiddle containing this example, and as there was the question how to adjust the circle from OP to work with this example I've adjusted this in another Fiddle. The only adjustment was to change the function createCircles as follows:
function createCircles() {
var myCircle = Circles.create({
id: 'circles-1',
radius: 60,
value: 43,
maxValue: 100,
width: 10,
text: function(value){return value + '%';},
colors: ['#D3B6C6', '#4B253A'],
duration: 400,
wrpClass: 'circles-wrp',
textClass: 'circles-text',
styleWrapper: true,
styleText: true
});
}
Can't you just calculate the scroll height like:
$(document).scroll(function(){
if($(window).scrollTop() + $(window).height() > $('#circles-1').offset().top + 810)
{
$(function() {
///your pies, 810px is your height
});
});
}
});
instead of loading a plugin...
My problem started with the version 5 of KineticJS, before that it was not a problem. Native KineticJS shapes such as squares and circles can be saved to an image file using the stage.toDataURL function. But it doesn't work for non-Kinetic shapes drawn with normal canvas methods such as beginPath(); and canvas.fill(); (version 4 did this fine). The following code draws two rectangles, one red and one blue. The red is custom, the blue is a native kinetic rectangle.
<body>
<div id="container"></div>
<button id="save">
Save as image
</button>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"> </script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var box = new Kinetic.Rect({
x: 400,
y: 80,
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(box);
stage.add(layer);
var canvas = layer.getCanvas().getContext('2d');
canvas.beginPath();
canvas.setAttr('strokeStyle', 'black');
canvas.setAttr('fillStyle', '#FF2222');
canvas.setAttr('lineWidth', 8);
canvas.rect(50,80,100,50);
canvas.stroke();
canvas.fill();
document.getElementById('save').addEventListener('click', function() {
stage.toDataURL({
callback: function(dataUrl) {
window.location.href = dataUrl;
}
});
}, false);
</script>
</body>
Both shapes appear, but only the blue rectangle appears in the image generated by the toDataURL function. The way they are drawn has changed in KineticJS 5, where you set attributes for fillStyle etc. so I'm thinking that may have something to do with it, or maybe the fact that the custom shape is added after the layer is added to the stage...
You are correct, between recent versions much has changed, and this has probably broken something in your drawing function.
You should consult the official docs on each item, but basically a custom shape has slightly updated properties... first of all "StrokeStyle" is no longer a valid property. Just use 'stroke'. Same thing with FillStyle.
Also -- 'dashArray' is no longer valid, now it's just 'dash' -- so I'm sure there are more things that changed that I'm not recalling... right, such as 'lineWidth' is now 'strokeWidth'...
Also -- the way you show or don't show strokes and fills has changed... yep, pretty much most of the way you used to do it has been changed slightly. 'drawFunc' is now 'sceneFunc' also...
var ctx = layer.getContext();
var customShape01 = new Kinetic.Shape({
sceneFunc: function(ctx) {
ctx.beginPath();
ctx.moveTo(162.1, 213.8);
ctx.bezierCurveTo(162.1, 213.8, 180.7, 215.3, 193.5, 214.5);
ctx.bezierCurveTo(205.8, 213.7, 221.8, 212.3, 222.8, 221.4);
ctx.bezierCurveTo(222.9, 221.7, 222.9, 222.0, 222.9, 222.3);
ctx.bezierCurveTo(222.9, 232.4, 204.6, 232.7, 192.0, 227.1);
ctx.bezierCurveTo(179.4, 221.5, 163.1, 213.8, 162.1, 213.8);
ctx.closePath();
ctx.fillStrokeShape(this);
},
id: 'customShape01',
fill: 'rgb(255, 0, 255)',
stroke: 'black',
strokeWidth: 2,
lineJoin: 'round',
dash: [5,5],
dashEnabled: 'true',
strokeEnabled: 'true'
});
check out a full working sample (you'll have to allow popups).
http://jsfiddle.net/axVXN/1/
I'm trying to put an image inside a circle but no success. This is my code:
//Elms.raphael() is my stage.
var circle = Elms.raphael().circle( 730, 200, 0 );
circle.attr( { fill : 'url(myImg.jpg)' } );
setTimeout( function()
{
circle.animate( { 'stroke' : '#000', r : 90, 'stroke-width' : '5' }, 300 );
}, 250 );
Instead of put the image in the circle It get colored with black ("#333"). I also tried to make an image-object but still doesn't work.
A little help please?
Another way to do, if you have separate image and want to bring it over you circle object.
This makes the whole image appear with smaller size that fits you circle. DEMO
var r = new Raphael(10,10, 500, 500);
var c = r.circle(200, 200, 80).attr({stroke: 'red', "stroke-width" : 3});
var img = r.image("http://www.eatyourcareer.com/wp-content/uploads/2012/06/ok-256x2561.png", 100, 105, 200, 200);
Here's a link to how I created a circle with an image in it:
jsfiddle
var paper = Raphael(document.getElementById("test"), 320, 200);
var circle = paper.circle(100, 100, 50);
circle.attr({
fill: 'url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-220px-SIPI_Jelly_Beans_4.1.07.tiff.jpg)'
});
I left the animate out entirely to keep it as basic as I could. It seems to work fine and is very similar to your code. If you cannot see it in the example it may be a browser issue.
Is it possible using the raphael.js or paper.js to draw a line with an arrow that moves with some animation morphing?
It's not entirely clear what you're trying to do, but the short answer to your question is almost certainly yes. I can only speak for RaphaelJS, but it's easy to tell Raphael to morph from one path to the other. Consider this fiddle and that fiddle, both of which rely on using raphael's animate function to modify the path element over time, often in conjunction with one or more transforms. The only caveat is that raphael's built-in path morphing doesn't always unwind in the way you might expect or desire. But in an attempt to animate something like the figure above, I'd do something like this:
var canvas = Raphael( 0, 0, 320, 240 );
var path1 = "M0,120 h300 l10,-10 l10,10 h100";
var path2 = "M0,120 h100 l10,-10 l10,10 h300";
var path = canvas.path( path1 ).attr( { stroke: 'black', fill: 'none', 'stroke-width': 1 } );
path.animate( { path: path2, stroke: 'red', 'stroke-width': 3 }, 3000, function()
{ path.animate( { path: path1, stroke: 'black', 'stroke-width': 1 }, 3000 ); } );
You can see this in action here.