I am having an issue loading certain SVG files in Fabric.js without grouping its elements.
The screenshots on how the file is displayed on the canvas with and without grouping are shown. The used SVG file is part of the Fabric.js' SVG test collection used at http://fabricjs.com/test/svg_import:
With grouping:
Without grouping:
Both screenshots correspond to what it results when using the Fabric.js' kitchensink. However, I obtain the same results when writing my own program.
I have tried other files and they are shown with no problems whether the grouping is performed or not. Because of this, I suppose the distortions observed for this file on the non grouped version are due to some SVG elements (transformations or groups, perhaps?) that are not very well handled by the library's SVG parser.
Is it possible to avoid this issue under certain conditions? If so, what kind of SVG elements should be avoided to prevent files from presenting this problem?
This is a well known "missing feature" in fabric.js
https://github.com/kangax/fabric.js/issues/1520
The library is not handling very good the object with a "transformMatrix" property set.
the "transformMatrix" property comes from parsing the transform attribute of the elements and the parents elements.
Normally the objects are grouped in a pathGroup object that is capable of handling the transforMatrix and give a correct rendering with the downside effect the objects cannot be moved individually or rotated/scaled.
There is a work in progress about this feature (by me) to solve this but is not complete yet.
You can download and try my branch here:
https://github.com/asturur/fabric.js/tree/experimentalCBox
Is not perfect yet but is gonna be inserted in future fabric version to fix this issue.
Related
I'm using Adobe PDF library (C++ Interface) and have been trying to remove the watermarks on an existing PDF for a while.
To add a watermark I have used the PDDocAddWatermarkFromText method, but I would need to remove the previously existing watermarks on the file.
I accomplished the task when the Watermark is added as an Annotation, but this will not cover all the possible cases, as it seems they can be added also as background Objects. Would need to know how these background objects can be removed from the file.
Thanks for help!
Well, it may prove difficult to clearly identify Watermarks that exist as purely text for removal instead of for example existing as a Watermark annotation. That being said if you can identify a pattern to how the watermarks are formatted it may be possible to devise a solution.
Have you attempted to contact the Support department for more assistance?
Watermarks will typically be the last element of the page's content stream, Backgrounds will the first element of the content stream. So I would check if the first or last element is a PDEForm. And if it is, I would then check if the PDEFormCosObj has a PieceInfo dictionary entry. The PieceInfo dictionary may indicate if it is a WaterMark or a Background.
Otherwise, you might need to analyze the content of that PDEForm for watermark-like properties (e.g. is it a Text Element with a single textRun? Does the Form|Text|TextRun's matrix indicate any rotation?)
I have 2 Objects that I have combined with the union/fusion control
The result is as expected, but now I would like to remove the remaining lines of the separate objects (at least in my view).
I understand the underlying principle of the stacking object tree and its good to have them still all available as single entities, but I would like to hide what would not be seen in reality also in my view.
Any takers?
Thanks
For anyone who's interested I found the solution. The view property dialog allows you to change the document window setting to "shaded" which hides the lines.
Using svg-edit and some of the variants I've found that seem like they are based on the same JS libraries, I create a basic drawing then using either source editor within svg-edit, or loading up an external Notepad-created SVG, that some attributes on <g> elements for example are tossed out.
I want to amend a typical element with let's say a class="Position" it works, and retains the attribute through edit cycles. But when I use foo="bar" that attribute seems to get discarded completely.
This is fairly inconvenient because I want to use svg-edit to create an arbitrary drawing with some unique-to-me attributes that my code can later recognize.
Is this a dumb question? Am I missing something fundamental about SVGs with arbitrary non-standard type attributes included (and for retention)?
We can have 4-5 people signing contracts at once, and are currently using the 'setShared' function to share text across all signing experiences for each client. However, when we use this, the text on the final contract comes out very blurry because the text layers get stacked on top of each other.
Sample text here:
I don't think setting Shared property is causing the problem. If you are setting the bold property on the tab then I suggest removing it. Also trying changing the font/fontSize properties to get the result you are expecting.
I want too build a web application, and I am looking at the tools I will have to use.
I want to use a real time map
I'm a thinking about :
Tilemill to get .png in order to constitue the background of my maps
or get data from a webite in shp files to build layers for this in mapnik.
Mapnik Build layers with the data I want to add on my map.
Mapnik : Put layers together and generate a map.
TileStache : generate tiles for my application.
Openlayers : Display my map with tiles in a browser.
Once my map is displayed, I'd like to add interactivity. For example when you go over a line or a circle (a town/ an event), then it gives you the attributes of this object.
But the lines and circles will integrated dirctly to the mapnik map, so I need to add some javascript to make it dynamic and open a pop-up. How do I do this ? Using Openlayer javascript libraries or node.js.
What is your advice on the question/the way I want to use theese tools?
Thanks a lot!
I'm in a similar situation, so I don't know the answer, but from what I've been able to figure out I think you're on the right track.
I started off using the Mapbox approach, which simplifies things as long as your data is static. You use Tilemill not only to generate your PNG tiles (once you've used Carto to do some nice styling) but also to import your data sets.
TileMill can export your TileJSON and UTFGrid files with the PNG tiles all packaged up and ready to use. Mapbox will then host all that stuff for you, and you can use their mapbox.js library (an extension of Leaflet) to bring it all together in the browser, with full interactivity. Opening popups would be something you'd do in Javascript in the browser - and if you mean infoWindows (the overlay window that's associated with a map point) then that would be a call to the Leaflet API.
If you're happy to create your layers and import your data offline this approach seems to be really simple and powerful; Mapbox will even render out tiles using multiple layers overlaid - so for example you can see your circles on top of a satellite image, merged into a single PNG.
The problem really comes in when your data needs to be live and you can't therefore prepare it all ahead of time in TileMill. I'm still trying to figure this all out but it does seem as though a combination of TileStache and Mapnik would be able to serve you up the TileJSON, GeoJSON and UTFGrid files you'd need as well as the tiles themselves, in the way you've outlined in the question.
You might also want PostGIS and GeoDjango or similar behind the scenes in order to hold and manage your live data, respectively.
As I said, I'm still trying to actually get my full stack working so I can't vouch for this 100% but if your data is gathered upfront then I'd definitely recommend the TileMill route for simplicity's sake.
I hope that's a help!