I am trying to generate and draw shapes using HTML 5 canvas and JavaScript. I am trying to make it as DRY as possible but having some issues. I have the code as follows:
var sections = {
"w_end" : {
"name":"W End",
"id":"w_end",
"dimensions": {"move_to":[0,0], "coords":[[0,50], [50,50], [0,50]]}
}
}
$(document).ready(function() {
$.each(sections, function(k,v){
make_shape(k, v);
})
});
function make_shape(id, attributes) {
var holder = document.getElementById('room');
var grid_canvas = document.createElement("canvas");
holder.appendChild(grid_canvas);
grid_canvas.setAttribute("id", id);
var item = grid_canvas.getContext("2d");
item.fillStyle = "rgb(154,250,50)";
item.beginPath();
item.moveTo(attributes.dimensions.move_to[0],attributes.dimensions.move_to[1]);
$.each(attributes.dimensions.coords, function(k ,v){
item.lineTo(v[0],v[1]);
});
item.fill();
item.closePath();
}
This does not seem to work when pulling the lineTo values from the json. I can switch the lineTo(v[0],v[1]) for lineTo(50,75) inside the lopp and it generates a filled shape. I am not great at JavaScript as you can tell. Does anyone know what the issue is here and maybe give some advice on generating multiple shapes from some sort of list?
Cheers
Tony
I played around with your code, it is flawless. There is no triangle drawn because somehow the path going back to itself fills nothing. Place only the first two vertices and it is OK.
"dimensions": {"move_to":[0,0], "coords":[[0,50], [50,50]]}
See this fiddle: http://jsfiddle.net/Nm7UQ/
Note that I commented out document.ready.
Related
I am looking at a way to divide the image into pieces.
The no of pieces that the image can be split into is configurable using tile_height and tile_width.Looking for help.
I would not want any solution with any frameworks. Only using vanilla JavaScript
I tried the below
var _clipX =0;
var _clipY = _clipX;
var _clipHeight = IMAGE_HEIGHT/TILE_HEIGHT;
var _clipWidth = IMAGE_WIDTH/TILE_WIDTH;
var _nRows = Math.floor(IMAGE_HEIGHT/TILE_HEIGHT);
var _nColumns = Math.floor(IMAGE_WIDTH/TILE_WIDTH);
for(var i=0;i<_nRows;i++){
for(var j=0;j<_nColumns;j++){
el.getContext('2d').drawImage(image, _clipX, _clipY, _clipWidth, _clipHeight, _clipX, _clipY,_clipWidth , _clipHeight);
_clipX = _clipX + _clipWidth;
}
_clipX = 0
_clipY = _clipY + _clipHeight;
}
Below is the JSFiddle for the work
JSFiddle
Yes!!!
Found it. Instead of iterating over the image tag dimensions when you call draw image it does iterate over the natural dimensions of the image hence the issue I faced.
Now I have tried with the image size same as my img tag dimensions and it works perfectly fine.
Thanks everyone for the help offered
Logo and elements from ul once clicked rotates image. By default image is already rotated by certain degrees, then on each click image rotates to necessary value.
So far I was using the following:
$("#objRotates").css('opacity','.2');
var value = 0;
var prev_value = 0;
$( "li" ).click(function() {
var text=$(this).text();
if(text==="text1"){value=0;}
if(text==="text2"){value=33;}
if(text==="text3"){value=66;}
if(prev_value != value){
$("#objRotates").animate({opacity:'1'});
$("#objRotates").rotate({
animateTo:value,
easing: $.easing.easeInOutExpo,
center: ["25px", "150px"],
callback: function(){$("#objRotates").animate({opacity:'0.2'});}
});
}
prev_value = value;
});
Above code is the one that was used before, where images start position was 0 and its animation was triggered from link text.
Using jqueryRotate.js examples(here)
How do I change the code, so that images start position is certain degrees and animation starts if element with specific ID is clicked?
Give at least clue..Cause for now, looking at my old code, I am lost. Thanks in advance.
SIMPLIFIED FIDDLE
Ok, so I've created a couple of samples for you to check out. The first one is very basic and I've simplified the code a little to make it easier to understand. This one just uses completely static values and a static elementId for the event, which I'm pretty sure answers your question based on your response to my comment yesterday. http://jsfiddle.net/x9ja7/594/
$("#elementId").click(function () {
var startingAngle = 45;
var endingAngle = 90;
var elementToRotate = "img";
$(elementToRotate).rotate({
angle: startingAngle,
animateTo: endingAngle
});
});
But I wanted to give another example as well that would be dynamic and repeatable for multiple elements. With the code above, you would have to copy/paste the same code over and over again if you want to perform this animation by clicking different elements. Here's an alternative. In this example, you set all of your parameters in the data attributes in the clickable element, then the function is completely repeatable, you only have to write it once. Less code = everyone happy! Here's the example: http://jsfiddle.net/x9ja7/595/
//#region Default starting angles
$("#image1").rotate({ angle: 90 });
$("#image2").rotate({ angle: 20 });
//#endregion
$(".rotateAction").click(function () {
//#region Optional parameter - used in the optional callback function
var $self = $(this);
//#endregion
var startingAngle = Number($(this).attr("data-startingangle"));
var endingAngle = Number($(this).attr("data-endingangle"));
var elementToRotate = $(this).attr("data-elementtorotate");
//#region If the current angle is the ending angle, reverse the animation - this can be removed if you want, I thought it may be cool to show some of the things you can do with this.
var currentAngle = $(elementToRotate).getRotateAngle();
if ( currentAngle[0] === endingAngle) {
startingAngle = Number($(this).attr("data-endingangle"));
endingAngle = Number($(this).attr("data-startingangle"));
}
//#endregion
$(elementToRotate).rotate({
angle: startingAngle,
animateTo: endingAngle
//#region This is optional - uncommenting this code would make the animation single-use only
//, callback: function () { $self.off().removeClass("clickable"); }
//#endregion
});
});
Hope this helps. If you need any other assistance, please let me know.
I wonder if it's possible to build a 3d donut chart in html.
I have found a interesting link here but infortunatly i need to add links (or javascript event) when clicking to launch a ajax request.
Have you ever done such a thing ?
Thanks for your answers
See the following example I've just made:
http://jsfiddle.net/baQCD/3/embedded/result/
The key point (pun intended) is to add a url key for each row (object) in the data array, and use it in the 'click' event handler:
point: {
events: {
click: function(e) {
location.href = e.point.url;
e.preventDefault();
}
}
},
In your case instead of opening a new url, you could do your ajax request or do anything else. In my example I've shown how to manipulate the data and title.
click: function(e) {
if (this.name == "Randomize!") {
sliceK = getRandomInt(0,chart.series[0].data.length-1);
chart.options.series[0].data[sliceK].y = getRandomInt(1,30);
chart = new Highcharts.Chart(chart.options);
} else if (this.name == "Link") {
location.href = this.url;
e.preventDefault();
} else {
chart.setTitle(null,{text:this.name + " clicked"});
}
}
You can immediately see, 2 features I very like in Highcharts, the ability to print or download the chart, and the ability to disable part of the data (removing it from the chart) by clicking on the legend.
This is based on the code shown in:
http://birdchan.com/home/2012/09/07/highcharts-pie-charts-can-have-url-links/
http://www.highcharts.com/demo/3d-pie-donut/
this is a simple 3d Axonometric class i wrote for testing, its very simple it puts the canvas transformation into a plane of zy or zx or yx... it uses canvas setTransform
you first have to call the axionometric class with phi and theta the angles of view
get_bd is a function where you can enter x,y,z coordinates and the method returns an object with b and d value... b is the x of the screen and d is the y of the screen.
i have appended and example, you just have to put a canvas tag in the html with id canvasView
//3d Maths - Axonometric -- Artner Thorsten -- Austria -- Wiener Neustadt
var context=document.getElementById("canvasView").getContext("2d");
function Axonometric (phi,theta)
{
var cosPHI=Math.cos(phi);
var sinPHI=Math.sin(phi);
var cosTHETA=Math.cos(theta);
var sinTHETA=Math.sin(theta);
this.cosPHI=cosPHI;
this.sinPHI=sinPHI;
this.cosTHETA=cosTHETA;
this.sinTHETA=sinTHETA;
this.phi=phi;
this.theta=theta;
}
Axonometric.prototype.get_bd=function (x,y,z)
{
var b=y*this.cosPHI-x*this.sinPHI-500;
var d=x*this.cosPHI*this.cosTHETA+y*this.sinPHI*this.cosTHETA-z*this.sinTHETA+500;
return {b:b,d:d};
}
Axonometric.prototype.plane_zy=function (x)
{
context.setTransform (0,this.sinTHETA,-this.cosPHI,this.sinPHI*this.cosTHETA,500+x*this.sinPHI,500+x*this.cosPHI*this.cosTHETA);
}
Axonometric.prototype.plane_zx=function (y)
{
context.setTransform (this.sinPHI,this.cosPHI*this.cosTHETA,0,this.sinTHETA,500+y*-this.cosPHI,500+y*this.sinPHI*this.cosTHETA);
}
Axonometric.prototype.plane_yx=function (z)
{
context.setTransform (this.sinPHI,this.cosPHI*this.cosTHETA,-this.cosPHI,this.sinPHI*this.cosTHETA,500,500-z*this.sinTHETA);
}
Axonometric.prototype.draw_axis=function (length)
{
var O=this.get_bd (0,0,0);
var X=this.get_bd (length,0,0);
var Y=this.get_bd (0,length,0);
var Z=this.get_bd (0,0,length);
context.save;
context.beginPath ();
context.textAlign="top";
context.fillText ("X",-X.b,X.d);
context.moveTo (-O.b,O.d);
context.lineTo (-X.b,X.d);
context.strokeStyle="red";
context.stroke ();
context.beginPath ();
context.fillText ("Y",-Y.b,Y.d);
context.moveTo (-O.b,O.d);
context.lineTo (-Y.b,Y.d);
context.strokeStyle="green";
context.stroke ();
context.beginPath ();
context.fillText ("Z",-Z.b,Z.d);
context.moveTo (-O.b,O.d);
context.lineTo (-Z.b,Z.d);
context.strokeStyle="blue";
context.stroke ();
context.restore ();
}
// example
var Viewer=new Axonometric (Math.PI/4, Math.PI/8);
Viewer.draw_axis (400);
Viewer.plane_yx (0);
context.beginPath ();
context.fillStyle="red";
context.fillRect (0,0,200,200);
Viewer.plane_zx (0);
context.beginPath ();
context.fillStyle="lightgrey";
context.fillRect (0,0,200,-200);
Viewer.plane_zy (0);
context.beginPath ();
context.arc (-100,100,100,0,2*Math.PI);
context.fillStyle="black";
context.fill();
Using an existing library is an easy solution. If I'm understanding your question properly, you would like users to be able to click on a slice to open a new URL.
This can be achieved in ZingChart by setting up a "pie3d" type, and then including "url" and "target" in the series.
Here's how I did it:
{
"graphset":[
{
"type":"pie3d",
"plot":{
"slice":45
},
"plotarea":{
"margin-top":"35px"
},
"series":[
{
"text":"Apples",
"values":[5],
"url":"http://www.google.com",
"target":"_blank"
},
{
"text":"Oranges",
"values":[8]
},
{
"text":"Bananas",
"values":[22]
},
{
"text":"Grapes",
"values":[16]
},
{
"text":"Cherries",
"values":[12]
}
]
}
]
}
Expanding on Merrily's answer, you can also use ZingChart's API to track chart interaction and call any functions you like.
var ZCwindow;
function openWindow() {
ZCwindow = window.open("http://zingchart.com/docs/chart-types/pie/", "ZingChart Pie Charts");
}
zingchart.node_click = function(e){
if(e.value == 5) openWindow();
};
You can view a live demo here.
I am part of the ZingChart team. You can reach out to us for assistance via support#zingchart.com
For the past few months I have been working with Google Visualization charts, and I think it may be exactly what you're looking for. Here is the link to the documentation.
This will give you a donut chart (though I am not sure if you can make it 3-D or not, I believe you can) and you can add event handlers for when the user clicks on a slice. Here's what it looks like:
I highly recommend trying the charts, I have found them to be extraordinarily useful. Good luck!
EDIT: My apologies, after re-reading the section on donut charts it appears the new API does not yet support 3-D donut charts. Does it absolutely have to be three-dimensional? If not this is still an excellent choice.
It's not 3D, but you should have a look at chart.js
I'm creating a interactive map with svg and I have converted the svg format to a javasript file (rahpael). I want to put a class on a path element, to create a hover effect, but I can't seem to get it to work:
var path_cz = rsr.path("M513.4,537l-329,19.3L209.5,666c0,0,9.5,36.8,51.5,48.8l108,22.7c13.3-16.7,119-43.4,175.6-8.7l165.7-58.6 c0,0,210.2-54.5,113.6-150.5c-33.3-27.3-61.9-50.4-61.9-50.4l-72.8-5.5l-46.9,2l-154,6.7l-2.6,21L513.4,537z").attr({fill: '#4F217C',parent: 'farver','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_cz');
I've tried .attr("class","classname"); and some other stuff inside .attr, but still nothing..
Any suggestions would be appreciated, thx :)
As you are using Raphael JS, the easiest way to do this is to hook into the hover method that Raphael supplies out of the box and update it that way.
$(document).ready(function() {
var rsr = Raphael(0, 0, 1000, 1000);
var path_cz = rsr.path("M513.4,537l-329,19.3L209.5,666c0,0,9.5,36.8,51.5,48.8l108,22.7c13.3-16.7,119-43.4,175.6-8.7l165.7-58.6 c0,0,210.2-54.5,113.6-150.5c-33.3-27.3-61.9-50.4-61.9-50.4l-72.8-5.5l-46.9,2l-154,6.7l-2.6,21L513.4,537z").attr({fill: '#4F217C',parent: 'farver','stroke-width': '0','stroke- opacity': '1'}).data('id', 'path_cz');
path_cz.hover(function() {
path_cz.node.setAttribute('class', 'one');
}, function() {
path_cz.node.setAttribute('class', 'two');
});
});
For an example, here is a fiddle: http://jsfiddle.net/n9Mt6/1/
Looking for some advice (example would be great) on dragging and dropping SVGs using RaphaelJS.
I have found how to drag an object created withint Raphael
window.onload = function() {
var R = Raphael("canvas", 500, 500);
var c = R.circle(100, 100, 50).attr({
fill: "hsb(.8, 1, 1)",
stroke: "none",
opacity: .5
});
var start = function () {
...
},
move = function (dx, dy) {
...
},
up = function () {
...
};
c.drag(move, start, up);
};
But I need to be able to adapt this to work with a seperate SVG file(s) so for example
myPage.html has myImage.svg, I need to be able to drag myImage.svg around the 'canvas'.
I'm thinking something like
var c = R.SOMEMETHOD('myImage.svg');
...
c.drag(move, start, up);
For example.
Is there a way to do this and if so, an example would be brilliant!
This magic method doesn't exist in RaphaelJS. But there is a way to accomplish this. You can have a look at the raphael-svg-import project on GitHub which works well for basic svgs
Then, you'll want to use a grouping facility as you cannot use the Set functionnality of RaphaelJS
1 - import your SVG
2 - As you import, mark the elements so they belong to the same group
Enjoy !!