Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have this SVG square that I want to be able to rotate and drag, how can I use Raphael JS to do this?
This is the SVG i want to manipulate:
<svg width="100" height="100"><rect width="300" height="100" style="fill:rgb(0,0,0);stroke-width:3;stroke:rgb(0,0,0)" /></svg>
Raphael.Freetransform handles dragging, rotating and scaling of individual elements and sets.
var paper = Raphael('holder');
var rect = paper
.rect(200, 200, 100, 100)
.attr('fill', '#f00');
// Add freeTransform
var ft = paper.freeTransform(rect);
// Hide freeTransform handles
ft.hideHandles();
// Show hidden freeTransform handles
ft.showHandles();
// Apply transformations programmatically
ft.attrs.rotate = 45;
ft.apply();
// Remove freeTransform completely
ft.unplug();
// Add freeTransform with options and callback
ft = paper.freeTransform(rect, { keepRatio: true }, function(ft, events) {
console.log(ft.attrs);
});
// Change options on the fly
ft.setOpts({ keepRatio: false });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://alias.io/raphael/free_transform/raphael.js"></script>
<script src="https://alias.io/raphael/free_transform/raphael.free_transform/raphael.free_transform.js"></script>
<div id="holder"></div>
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I'm looking to build a system that maps injuries, and want to create a GUI whereby people can click on an SVG of the human body to select major body parts (head, arm, finger, legs, etc.). I've found an SVG but need to understand what the best way would be of selecting the underlying elements and passing to the DOM.
Is there a plugin available for this, or otherwise how should I approach it?
Two steps:
Group parts of your SVG, using <g>
Give classes to parts of your SVG (either to <g> groups or to individual elements), such as:
class="left forearm arms"
class= "right thigh legs"
class= "left ear head"
That will give you the tools to select:
the sides of the body (left or right)
larger sections of the body (arms, legs, head etc.)
smaller sections of the body (forearm, thigh, ear etc.)
If you want more interactivity with svg, you can Load svg file with ajax and manipulate the elements (e.g: path, ellipse) with javascript. It's also possible to animate the elements with a library like Velocity Kute js or Anime js.
Play with this example: and try uncomment the line 18 or 21. This svg file is a bird with two elements: path and ellipse
// helper for select like jQuery
function $(selector) {
return document.querySelector(selector);
};
svgpath = "https://s.cdpn.io/3/kiwi.svg";
svgCanvas = $("#svgCanvas");
// Requisão Ajax para importar o svg
svgObj = new XMLHttpRequest();
svgObj.open("GET",svgpath ,false);
svgObj.overrideMimeType("image/svg+xml");
svgObj.send();
svgCanvas.appendChild(svgObj.responseXML.documentElement);
var bird = $("#bird");
//bird.style.display = "none";
var shadow = $("ellipse");
//shadow.style.display = "none";
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I wish there was a horizontal funnel plugin available in the market. I'm not a good js developer but I'm a designer with html/css skills in hand. I have designed similar funnel like below in psd but I couldn't find any plugin to plug in into the html. The funnel links should be dynamically adjusted too. Please suggest me how to build similar kind of funnel with steps title, conversion % on the second row in the funnel columns. I've also created this in css but css doesn't work because the funnel columns should be totally dynamic.
Here's how to draw your horizontal funnel chart for a given set of data using Canvas...
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var height=100;
var baseY=200;
var ascending=35;
var descending=35;
var barheight=50;
var data=[65,14,4,3,3];
filledLineChart(data,height,baseY,descending,ascending,barheight,'gold')
function filledLineChart(data,height,baseY,descending,ascending,barheight,fillcolor){
var stepWidth=canvas.width/(data.length-1);
var maxDataValue=0;
for(var i=0;i<data.length;i++){
if(data[i]>maxDataValue){maxDataValue=data[i];}
}
ctx.beginPath();
ctx.moveTo(0,baseY-height*data[0]/maxDataValue);
for(var i=1;i<data.length;i++){
ctx.lineTo(stepWidth*i,baseY-height*data[i]/maxDataValue);
}
ctx.lineTo(stepWidth*(data.length-1),baseY);
ctx.lineTo(0,baseY);
ctx.fillStyle=fillcolor;
ctx.fill();
ctx.strokeStyle='lightgray';
ctx.strokeRect(0,baseY-height-ascending,canvas.width,height+descending+ascending);
ctx.strokeRect(0,baseY-height,canvas.width,height+descending);
ctx.beginPath();
for(var i=0;i<data.length;i++){
ctx.moveTo(i*stepWidth,baseY-height);
ctx.lineTo(i*stepWidth,baseY);
}
ctx.stroke();
ctx.fillStyle='whitesmoke';
ctx.fillRect(0,baseY-height-ascending-barheight,canvas.width,barheight);
}
<canvas id="canvas" width=300 height=300></canvas>
You can apply all your text like this:
// set a font and set a font color and draw some text
ctx.font='14px verdana';
ctx.fillStyle='black'; // or red or whatever
ctx.fillText('21.5%', 100, 175) // 100,175 are the x,y text position
I leave it to you to apply your various text values for the chart using this simple text method.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Like our avatars: is it possible to create a simple avatar that i can use as placeholder for my users?
and extending that: how far can you go with the art preferences: colors, shape etc.
Link only answers are frowned upon but I think I'll take the risk: There are several libraries for those so called identicons Sampson linked to. The code there is Java (or looks very similar). A pure JavaScript implementation seems to be jdidenticon. You have more possibilities with PHP (you can use e.g.: ImageMagick and similar) but JavaScript is cheaper for your load ;-)
It is possible to create 2D and 3D graphics with javascript and the HTML5 tag canvas
<canvas><canvas>
Inside your javascript code you define what should painted inside your canvas
var context = document.getElementById("canvasId").getContext("2d");
var width = 125; // Triangle Width
var height = 105; // Triangle Height
var padding = 20;
// Draw a path
context.beginPath();
context.moveTo(padding + width/2, padding); // Top Corner
context.lineTo(padding + width, height + padding); // Bottom Right
context.lineTo(padding, height + padding); // Bottom Left
context.closePath();
// Fill the path
context.fillStyle = "#ffc821";
context.fill();
<canvas id="canvasId" width="165" height="145"></canvas>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
If I have a map in SVG format, how can I scale the image to be say, X times bigger? How would I achieve this? I want to be able to scale it based on an X variable which of course varies
I have looked into it but I am stretched for time. I just want to know where to begin.
To scale SVG data you need to use a scale transformation.
So to make an element, e.g 3 times bigger you would use:
var mySVG = document.getElementById("mySvgElement");
var scaleCoefficient = 3; //this will make it 3 times bigger in x/y direction
mySVG.setAttribute("transform", "scale(" + scaleCoefficient + "," + scaleCoefficient + ")");
That will apply a scale transformation of '3' in x/y directions thus making the element 3 times bigger without changing it's aspect ratio
SVG elements are defined by a transformation matrix - this is what vector shapes generally use to define translation/rotation/size without changing the actual SVG geometry data of the shapes themselves.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Is it possible to extract the colors from an image of any type using javascript? i want the percentage of each color in the image as well.
To get the base 64 encoded image data,
function getBase64FromImage(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
return canvas.toDataURL("image/png").replace(/^data:image\/(png|jpg);base64,/, "");
}
You'll probably want to have a library process the image data, rather than doing it yourself:
What is the best JavaScript image processing library?
Yes this is possible. You need to load the image on a canvas. Then you can extract the color on each arbitrary x,y coordinate.
You might want to have a look at
http://lokeshdhakar.com/projects/color-thief/
getPixel from HTML Canvas?
How to fetch a remote image to display in a canvas?
How to add image to canvas