SVG image renders differently on Canvas with FabricJS - javascript

While loading a SVG file on a FabricJs Canvas I found out that it was rendering it with different colours than what it was actually designed for.
This is how it looks if i open it on browser.
This is how it renders on the canvas.
Here is the gist of my code.
I found a similar post on SVG here where the problem was solved with removing the fill-rule="evenodd"; however that trick did not work for me.
I am struggling with this for past 2 days. Need a fresh angle on this.
I would really appreciate any inputs.

Turns out I was using the same id two different paths. Renamed them, works fine now.

Related

Svg morph with anime js not changing path

i'm trying to make some svg animations using anime js, i thought it would work just fine because, because i just need to change de d atribute.
I was using some blobs, but it seems that the code isn't recognizing their paths.
This is a pen i created to load the svg's
https://codepen.io/obarrier/pen/eYmyEEa
This is the pen of the animations
https://codepen.io/obarrier/pen/NWPXvRy
I know i'm doing something wrong, but can't figure out where the error is...Because the path isn't being recognized
Thanks in advance!
I see a few issues. The first, is you have a space after .blobPath in your second codepen.
targets: '.blobPath ',
Secondly, your paths are really messed up. The 3 values you provide after the first value is waaaayyyyyy outside the view box. Plus it looks like you have a rotation on your main path, but you don't on your other paths.
I found that if you create one file for your animation. You can just duplicate a path and then rework the new path. Do this for each path you want to animate. That way you will be sure that the points are correct.
Then you just export the SVG and open it up in your favorite text editor and copy the "d" values into your code.
d="M265.42,72.182l0,-72.182l-265.42,0l0,82.817c0,0 12.811,13.647 32.105,14.751c19.294,1.104 57.317,-11.093 57.317,-11.093l43.249,-13.139c0,0 20.977,-7.784 40.873,-7.784c19.897,0 38.711,7.784 38.711,7.784c0,0 27.756,11.399 41.335,7.557c13.579,-3.842 11.83,-8.711 11.83,-8.711Z"
I reworked your code pen, I think it's doing what you want it to do. I didn't spend a lot of time working on the paths. I'll leave that up to you.
https://codepen.io/cjboco/pen/zYGMmKm

Create EaselJS sprite animation with SpriteStage (WebGL)

I have this sprite animation in EaselJS created with the classic Stage, here is the fiddle:
Fiddle: http://jsfiddle.net/6sygocvb/
EaselJS now has SpriteStage, which translates to WebGL and falls back to canvas if needed.
How do I create the example above with SpriteStage? Can you guys help me with a fiddle? Even though it is a very simple example, I just can't get it to work. I would be forever greatful if you can help me out with a working fiddle
Note: SpriteStage and SpriteContainer are in BETA and need to be included separately
https://github.com/CreateJS/EaselJS/blob/master/src/easeljs/display/SpriteContainer.js
https://github.com/CreateJS/EaselJS/blob/master/src/easeljs/display/SpriteStage.js
The reason behind this is that I want to create some sprite animations in WebGL (for obvious reasons) that fallback on canvas when WebGL is not supported. EaselJS is now offering a fast and simple solution with SpriteStage, but I'm open to other solutions as well
Any kind of help is highly appreciated, thanks!
EDIT:
Thanks to Lanny, I have a fiddle with a somewhat working version of my sprite animation using SpriteStage, however, here it's not loading, all I see is a black background. it seems that it's not managing to load the background, any idea how to fix this?
His fiddle http://jsfiddle.net/6sygocvb/1/
UPDATE:
Problem solved, thanks to Lanny, here is his Fiddle with loading the images before successfully.
Also, a separate thread about loading images successfully with SpriteStage is on the CreateJS Community Forum
SOLUTION:
After many researches and with the awesome help from the CreateJS guys (Lanny & gskinner), I have created a repo with a setup that works well with SpriteStage.
The repo is here and it contains a custom version of SpriteStage.js (thanks gskinner) that has a fix for loading the images before rendering them.
Thanks and enjoy!
Here is an update fiddle.
http://jsfiddle.net/6sygocvb/1/
Note that all elements added to a SpriteContainer must have the same SpriteSheet.
The 2 bits I added are:
1) Change to SpriteStage. I also moved the canvas element to the HTML block of the fiddle:
var stage = new createjs.SpriteStage("canvas");
2) Create a SpriteContainer to add your Sprite to:
var container = new createjs.SpriteContainer(ss);
Hope that helps!
[EDIT]
Here is an updated fiddle using a power-of-2 image, and served from a CORS-enabled server.
http://jsfiddle.net/lannymcnie/6sygocvb/5/

dc.js Tutorial Line Chart Render

I'm following this tutorial on the JavaScript library dc.js and am having an issue with rendering a line chart in the tutorial. I get something to display, but it doesn't look at all the way it should in the tutorial. The D3 and Crossfilter parts of the code seem to be talking to each other since the brushing functionality works, so I'm wondering if I don't have the CSS referenced correctly. You can easily view the code by just viewing the page source. I'm assuming this is something simple that I'm just overlooking due to being fairly new to CSS and JavaScript. Thanks in advance for reading.
Your problem is that the fill attribute on the path svg element is not set, so it's defaulting to black, giving you that black fill in the middle. When I open the developer console in my browser (using IE), I get error messages that say "CSS was ignored due to mime type mismatch." for both dc.css and colorbrewer.css. GitHub is a pain with mime types, so you may want to move these files elsewhere.
The work-around to get the fill to go away (but not addressing your css loading problem) is adding this line of code:
d3.select(".line").attr("fill-opacity", 0);
I hope that helps!

Raphael.js image fill not updating constantly

I do have a Paper.path() in Raphael that is filled with a simple texture:
var fill = screen.path(Iso.topFacePath(top)).attr({
fill: 'url(http://www.example.com/mytexture.jpg)',
});
The path can be altered by the user via drag and drop. For this I use Element.drag() to bind the handlers.
The problem that I encouter now is that while the onmove-handler function is called the element in question will be recalculated and has to be drawn again. Apparently this is "too much" for raphael and the fill pattern will disappear randomly (flicker) and appear again some time later (at latest onend).
The actual code I use is a little too much to post here but I built a fiddle where you can see what's going on (you can drag the upper sides of the quadrangle).
Is there a simple fix to this?
I am used to canvas much more than raphael (actually this is the first time I really use raphael) so maybe my approach of redrawing everything everytime sth changes is plain wrong?
EDIT: I just found out that seems to be somehow browser-related as well. Chrome and Firefox will produce the flicker where Safari seems to do everything just fine.
This seems to be caching issue (raphael.js does not cache the bitmap fill and will reload it on every change) and is fixed (for me) by this pull request on GitHub that is (as of 08/14/2012) still pending.
Raphael is pretty hard / impossible to build oneself as the make file points to local and/or inexistent files, but you can either concatenate everything by hand, modify the build script or use the modified build that is used in the example to get hold of the fix.
Let's hope it will find its way into a future release of Raphael.

Hover effects on irregular polygons in CSS

I'm wondering how to go about marking up and coding hover effects for a map similar to this image.
When each district (or section) is moused over/touched/clicked I need to change the colour of it without affecting any other section. The boundaries on each section must be representative of the image and shouldn't be squares. The solution can't use canvas since the site I'm working on has to be usable in older browsers (I'm gutted, personally.)
Ideally I want to do this with CSS without using too much JavaScript or loads of images. Has anyone done this before?
Edit: I know people are suggesting the <area> tag, but AFAIK, it doesn't accept the :hover pseudo class.
Edit 2: I might use this: http://www.netzgesta.de/mapper/
Another self answer...
A few months ago I came across a library called Raphael JS - http://raphaeljs.com/. For those of you unfamiliar with it, it's an SVG DOM library first and foremost. If you know a thing or two about SVG, you'll know that IE doesn't support it, but it does support VML. Raphael caters for this as well. Awesome, right?
Anyway, I ended up saving the AI file for the map as an SVG file and importing the paths into a JSON block, basically doing the same thing as this code: http://raphaeljs.com/australia.html
The only issue I came across:
I wanted the map background to be transparent. Setting fill to transparent whilst allowing the section to accept mouseover worked in Firefox, but in IE, it failed. I instead opted for filling the path with white, then setting the opacity to 0.01. After that I duplicated the path and didn't fill it to create the border.
You can use HTML <area> Tag
If you use jQuery you can use the maphilight plugin. documented at http://davidlynch.org/projects/maphilight/docs/ and available from github at https://github.com/kemayo/maphilight
I see what the problem here is: making let's say a world map the usual way is quite a load. If I get it right, what you want is to have a territory map image and put hover effects making hover area match country borders exactly. SVG can be used for the map (the drawing part is already done) but the problem is how to generate HTML area map using SVG map coordinates. There's a solution (I've tried it, looks good at least with the demo provided) which translates SVG into Raphael (generates the coords) using PHP. But again you need raphael.js for that... well if you change your mind: https://github.com/atirip/svg2raphael. And if you're not familiar with Raphael it will take a time to get used to it, documentation is not so good -for me-.
Edit: I can confirm that translation from SVG->rapahel.js works but SVG files needs some tweaks. For what I see in the example SVG provided in svg2raphael the files were made with Adobe Illustrator. I've tried with SVG (plain) from Inkscape and it didn't work properly, but I could manage to fix the issues, for example:
svg2raphael won't translate Inkscape generated <path style="fill:#ff0000" ...></path> (will set fill="none"!!! so the result is invisible, but will translate correctly <path fill="#ff0000" ...></path> Seems like it will ignore everything inside style="".
svg2raphael misreads the alignments from Inkscape SVG, so you need to either move the illustration inside Inkscape or edit the SVG file with text editor and change the M value to M0,0.
svg2raphael can translate multiple svg elements, but looks at the main tag which Inkscape generates to align groups of illustrations, sometimes the whole illustration moves away from the render area and you see nothing. Hope this helps!
Edit 2: You can use Inkscape's style="" for creating CSS rules to apply to the SVG, that works great ang keeps style outside SVG/Raphael!

Categories