I am using Raphael-js to position text on a canvas. Is it possible to have a background color for the text? I would like different text elements to have different backgrounds colors.
Thanks,
Yes, there is no way to specify background for text, here is how to create rectangle that will serve as a background:
var text = canvas.text(p.x, p.y, poly.title).attr(textAttr);
var box = text.getBBox();
var rect = canvas.rect(box.x, box.y, box.width, box.height).attr('fill', 'black');
text.toFront();
The background of text is known as "fill" and can be applied using the attr function as follows:
paper.text(50, 50, "Example").attr("fill", "#000000");
For a full listing of the properties, see the Raphael Documentation
Related
So I have an <img> tag with a .png source and I need to apply a color change to it. I tried the filter property in CSS but apparently it’s not supported in IE. Any idea if I can do that with JavaScript?
Maybe you can achieve this in two way:
by using different png source files, changing them at the occurrence of an event:
with pure JavaScript:
var image = document.getElementById("my_image");
image.src = "image_1.jpg";
with jQuery:
$("#my_image").attr("src","image1.jpg");
by giving a transparency to your png to show a background-color applied below it:
with pure JavaScript:
var image = document.getElementById("my_image");
image.style.backgroundColor = "#0000ff"; // or "blue" or "rgba(0, 0, 255, 1.0)"
with jQuery:
$("#my_image").css({ "background-color" : "#0000ff"});
Cheers
I have a svg path where I apply both a background colour as well as a filter containing a (possible scaled and translated) image.
First the background colour is applied using the css fill property: myPath.css('fill', bgColour);
Afterwards the filter is added like this:
var filter = svg.filter(defs, 'myImageFilter',
0, 0, scale + '%', scale + '%',
{
filterUnits: 'objectBoundingBox'
}
);
// add the image
var outputSlot = 'myImage' + sectionNumber;
svg.filters.image(filter, outputSlot, pathToImageFile);
// move it
svg.filters.offset(filter, 'movedImage', outputSlot, moveX, moveY);
// combine image with path for clipping
svg.filters.composite(filter, 'clip', 'in', 'movedImage', 'SourceGraphic');
// mix both images
svg.filters.blend(filter, '', 'multiply', 'SourceGraphic', 'clip');
// assign filter to the path
myPath.attr('filter', 'url(#myImageFilter)');
The problem I have with that is the background colour affects the image, too (as if it was painted above the image). What I need is that the image is placed on top of the background instead.
Any idea about how to achieve this?
Do I maybe need to duplicate the whole path to have it one time for the background colour only and one time for the image?
It's probably the "multiply" in your svg.filters.blend. Just use "normal" instead of "multiply".
I have a question about my HTML5 canvas, how can I change the color of a shape using HEX?
I have been able to change the color and size of a text but I would like to do the same to a shape, in this case a circle.
Right now you enter a text in a textbox and you can change color and size.
Also, I want to be able to click on the canvas to paint one circle, then change color and make another circle in a different color than the first one.
My code for the text jsfiddle.net/e43nfx1d/4/
My code for the circle jsfiddle.net/w8wsv7sr
It was pretty easy to do the changes on the text but now, with the circle, Im totally lost.
/Wilma
As I realized your question, your problem is to changing the color of filled circle.
There isn't any big problem here; You can change it as the same way of changing the text color.
Just like this:
context.fillStyle = "#333";
// Or any other color format that css supports
Here's your working example: http://jsfiddle.net/76koy1x7/
I am passing image to Raphael. Currently image is displaying square, i want the image to displayed in circle format.
<div class="demo"></div>
JavaScript
var r = Raphael("demo")
var myimage="xyz.jpg"
var img = r.image(myimage, 81, 80, 50, 50);
// displaying image in square (need to be circle)
Please help me out. Thanks
The function Element.attr(…), sets the attributes of an element. Perhaps you can create a circle and then fill it with your image. The attr is "fill".
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
That example is from the Raphael's web, you should try:
circle.attr("fill", myimage);
or
circle.attr("fill", "xyz.jpg");
Hope that helps,
Gabriel.
You need to draw a circle and then fill it with an image. This has already been answered here.
I have a black heart PNG image I want to display with different color. How can I change the color of the heart using javascript/css/jquery?
I'm trying to make a shirt designer. So the background is a shirt, and the heart is the print design (among other shapes).
P.S.
I know this is already a duplicate but there seem to have no solution that was of help. Hope you guys could help me if ever you have done this already. Thank you so much!
SOLUTION UPDATE:
The solution was to use canvas. Found my solution here.
Here's the code:
<h4>Original Image</h4>
<img id="testImage" src='black-heart.png'/>
<h4>Image copied to canvas</h4>
<canvas id="canvas" width="128" height="128"></canvas>
<h4>Modified Image copied to an image tag</h4>
<img id="imageData"/>
<script>
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
image = document.getElementById("testImage");
ctx.drawImage(image,0,0);
var imgd = ctx.getImageData(0, 0, 128, 128),
pix = imgd.data,
uniqueColor = [0,0,255]; // Blue for an example, can change this value to be anything.
// Loops through all of the pixels and modifies the components.
for (var i = 0, n = pix.length; i <n; i += 4) {
pix[i] = uniqueColor[0]; // Red component
pix[i+1] = uniqueColor[1]; // Blue component
pix[i+2] = uniqueColor[2]; // Green component
//pix[i+3] is the transparency.
}
ctx.putImageData(imgd, 0, 0);
var savedImageData = document.getElementById("imageData");
savedImageData.src = canvas.toDataURL("image/png");
</script>
Trick 1
Have multiple images already created (using photo editing software such as Gimp or Photoshop) and simplly change the image source using jQuery.
Trick 2
Another option is to have a PNG with transparent heart-shapped hole in it and change the background colour using jQuery.
You can't.
What you can do is replace it with the unicode text character for a heart and set the colour of that.
We can Use css Filters which will change the png image color.
.test {
filter: invert(38%) sepia(87%) saturate(4677%) hue-rotate(310deg) brightness(100%) contrast(92%);
}
<img src="image.png" class="test"/>
Make two images and use the CSS Sprites technique to change the image color when user clicks/hovers/ etc.. you can customize as you want. See the link for simple tutorial on creating the CSS Sprites.
This is the best solution i found but doesn't quite apply to your t-shirt project, just for people who want to use shape icons.
You can use FONTS. And the rest is history, we all know how to change a font color.
http://fortawesome.github.com/Font-Awesome/
You can use Photoshop to change the color of your image, then you use onmouseover to change your image to be changed. finally, you use onmouseout to return the original image(note: you have two images: 1 changed and 1 the original).
if you want to change color of t-shirt by considering wrinkles ... you can use a fabric js library and apply blend color filter to your image ..it works very well
fabric js blend color