Have a background image in paper.path with raphael? - javascript

I want to put some background image to my paper.path I've created with raphael
paper.path(arc([xCenter, yCenter], radius, startAngle, endAngle)).attr({
'stroke': "#ccc",
'stroke-width': rinc - 1
});
The result:
http://jsfiddle.net/n4Rvr/
I just want to put some image instead the #ccc color. Is it possible? However, I didn't find something interesting on internet.

You want to fill the stroke of the path? There's no support for using patterns on the stroke in Raphaël, so it's not as easy as it is in pure svg, where you can either stroke with a pattern or mask an image with the given path to get the effect you're after.
To get something similar in Raphaël you'll need to build the stroked path as a new path, basically tracing around the inner and outer arcs so that you can fill it. Then use 'fill' instead of 'stroke' and pass in the url of the image you want.

Related

D3 fill shape when draw with path

I'm using D3 to draw a certain shape layout for my map and the drew area has to be shaded. I am using line path to achieved the shape, What I couldn't figured out is how do I shade (fill) the area with a certain color. See picture for an example shape, just random in this case for visual aid.
you need to checkout the fill style property on paths.
<style>
path {
fill: red;
}
</style>
In order to fill the area described by these paths, simply assign the CSS attribute fill.

javascript - How to clip using drawImage/putImageData

I'm writing an application that needs static clipping for images on the canvas (as you move the images on the canvas the clipping area stays in one place). I have three cases: polygon, ellipse, any shape specified with an image. I was able to cope with polygon and ellipse, because I can do them with paths and arcs, but when it comes to a mask specified via an image I'm not sure what to do.
Example shape to clip to:
Let's say I am not able to draw it using paths
So I have it specified with an image, I know how to obtain image data from it. What I'm trying to achieve is to clip everything that is out of that figure.
I was trying like this:
canvas.clipTo = function (ctx) {
ctx.drawImage(shape.src, left, top);
};
And like this:
canvas.clipTo = function (ctx) {
ctx.putImageData(imgData, left, top);
};
Of course none of them work as I expect, it just draws that black shape instead of clipping to that region.
Any ideas how to do it?
I do it by creating a new canvas the same size as the mask image. Then draw the image on that canvas, then set the ctx.globalCompositeOperation to "destination-in" draw the mask over the image (masking it) , then draw the that canvas to the on-screen canvas with ctx.drawImage
As this is most definitely a duplicated question I will not give the answer as code, it's been done to death here on stackoverflow.
Oh and I forgot. Using imageData to clip is a very inefficient way to do it.

How to clear rectangle on Image in Canvas

I need to clear a rectangle Drawn on Image in Canvas with out damage existing image. I can draw small rectangle points and clear that out. But the problem is when I clear rectangle it remains as white small patch on image.
Can someone tell me how to clear a rectangle on image without damage the existing image.
I have used following methods to clear rectangles but didn't work.
1) context.fillStyle ="white";
2) context.clearRect(xCoordinate, yCoordinate, 10, 08);
Thanks in advance!
Canvas doesn't work that way. It's a single layer, its also transparent by default. So with that in mind, you might be able to achieve what you want by simply giving the canvas element a CSS background. That way anything you draw on top of that background can easily be removed and the background will show through.
#backed-canvas{
background-image: url(http://www.placebear.com/300/200);
}
JSFiddle example: https://jsfiddle.net/yLf5erut/
There is one thing you can do.
When create a rectangle on the canvas just get the image data like:
var imgData = context.getImageData(xCoordinate, yCoordinate, 10, 8);
and draw the rectangle.
When clearing out the rectangle just place then image data back like this:
context.putImageData(imgData, xCoordinate, yCoordinate);
I suggest using 2 canvas elements one over another.
So you can have the original image drawn on the bottom canvas with low zIndex, and the top one with highter zIndex can be used to draw / clear whatever needed. This is a common practice, and for more complecated animations you will end up with better performance.

Fill property in raphael js

I want to create a sphere in Raphael which should look like
I am using Paper.ellipse with equal horizontal and vertical radius to draw sphere.
I think I need to tweak fill attribute to achieve effect as shown in image. Also I want sphere in different color with same effect.
Can anybody point out any helpful link about fill property in Raphael as I couldn't find enough information?
Used
function ball(x, y, r, colour) {
paper.ellipse(x, y, r, r).attr({
fill: "r(.3,.25) white-" + colour,
stroke: "none"
});
};
You can use any color like yellow or color code like #00CC33 for hue.
Demo.
Demo Source Code.
You can watch the source of this page: http://raphaeljs.com/ball.html. Basically, it consists in drawing several ellipses to simulate a single enlightened sphere.
You can learn more about gradient in Raphael on this topic.

jVectorMap change SVG stroke color

Using jVectorMap on a site and would like to change the stroke color of state borders within the USA map. Have tried inserting a stroke color within each states coords within the path to no avail.
Has anyone been able to do such thing?
Appears you can add the stroke in the stylesheet.
.jvectormap-region {
stroke: white;
stroke-width: 2;
}
Unfortunately you can't achieve this easily now without modifying the code of the jVectorMap.
Just add the following code around line 123 of jquery.vector-map.js:
node.setAttribute('d', config.path);
node.setAttribute('stroke', '#000000'); // Whatever color you like!
node.setFill = function(color)...
Greetings!
Another question: my VML Fallback doesn't seem to work. The path coordinates are from an SVG created by Adobe Illustrator. Has anyone the same problem or can give me a solution which programm to use to create the path data?

Categories