Is this combination possible? I have a retro-style spritesheet, however I'd like to use SVG with it in order to apply some effects such as shadows, outlines, and other things. Don't question it.
I know canvas is an alternative, however for this project I'd prefer to use SVG. One major issue is in the way, however: taking individual sprites from a spritesheet. Additionally, I use 1x1 pixel sprites but enlarge the spritesheet to make them 6x6 via hidden canvas, so I'm also working with an image element as opposed to linking to an image outside of the page.
Is it possible to choose regions of the image to use in SVG? The SVG image element doesn't appear to offer such options.
You can use a clipping path with your image, clipping exactly to the contents you want. For example:
http://phrogz.net/svg/image-spritesheet.svg
If you're only targeting Firefox, you can instead use: image-spritesheet-simple.svg
Alternatively, you can place your <image> in a new <svg> element inside your SVG. The inner <svg> establishes a new viewport, and you can then use the viewBox of that to only display a rectangular region from your image (more like a normal sprite sheet).
Related
I am using Leaflet to overlay SVGs on top of the map. These SVGs are positioned to exactly overlay on a location such that it covers it perfectly. Think of overlaying a running track with a custom SVG.
To overlay, I am using L.imageTransform as I need to transform them. L.imageTransform extends L.imageOverlay to overlay the image (should I use SVG overlay, not sure?)
The problem is, on some of the overlays, when I zoom in, the SVG gets blurry and it loses its detail that we want. Blurry locations differ in Firefox and Chrome, and are randomly blurred. A sample blurred image can be seen below:
This could either be a browser issue or could be due to the scaling of map tiles. Any ideas?
I'm adding borders to various images in a .pdf document. The borders all have the same width, but in the .pdf the borders have different widths. It is more pronounced as the width of the border increases.
Also, is there a way to move the border outside of the image, so that it is not covering any of the image using the methods of the image class? I realize I can first put a filled rectangle and then add the image on top of the rectangle as an option. Just curious as to if this can be done with methods from the Image class.
Here is the code snippet
magazine.open();
canvas = pdfw.getDirectContent();
image = Image.getInstance("a.JPG");
image.setBorder(Rectangle.BOX);
image.scaleAbsolute(200,200);
image.setBorderWidth(50);
image.setAbsolutePosition(50,10);
//canvas.addImage(image);
magazine.add(image);
image = Image.getInstance("b.jpg");
image.setBorder(Rectangle.BOX);
image.scaleAbsolute(200,200);
image.setBorderWidth(50);
image.setAbsolutePosition(50,230);
//canvas.addImage(image);
magazine.add(image);
I fear you'll have to work with the workaround you described.
There are two ways to define a border for an image:
image.setUseVariableBorders(false);
This is the default. This is what you have (even though you aren't calling the method explicitly).
In this case, the thickness of the border is distributed in a way that half of the line width is inside the rectangle and half of the line width is outside of the rectangle. Maybe that's what's causing the effect that the difference you notice is more pronounced as the border width increases.
Then there is:
image.setUseVariableBorders(true);
Now the borders will be drawn inside the area needed for the image. This is useful for tables (both PdfPCell and Image are subclasses of the Rectangle class where these methods are defined), but I fear it doesn't help you in the case of images.
So your best chance is to add the border using a workaround.
I have been looking to dynamically scale a image map with coordinates to a div, so when re-sizing a window occurs the map and all coordinates are scaled accordingly.
any suggestions on how to do this?
i think this may work
http://blog.outsharked.com/p/image-map-resizer.html
but with the alternate option of :enter a bounding area and the map will be clipped to within that area.
my question then is how do i establish a bounding area, will it scale dynamically to that whole area?
This jQuery plugin works great for scaling and rescaling image maps on the fly. You can call this once, and it will take care of all image maps on the page. It will even rescale an image map if something happens that changes an image's dimensions.
https://github.com/stowball/jQuery-rwdImageMaps.
If you weren't just using the div to solve the image map scaling problem, you could put a blank image (a completely transparent .gif or .png) in your div with the image map applied to it and set its width and height to 100%.
I have started learning CANVAS. After i started drawing some basic shapes, i wanted to make some modifications to them. For example, I am confused of how to modify length and width of rectangle. Should i have to clear the canvas and redraw or can i capture the object of that rectangle like the objects in java script.
The canvas is a raster graphics surface. modifying length and width of a rectangle is a vector action. It is possible to scale a raster, but losses in quality can/will occur. You can use vector graphics in the form of SVG. But if it is only a rectangle, use a div with a border overlay-ed on your canvas.
If have an image which is 1024x1250 and a canvas element that is 600x800, I can draw the image to the canvas centered such that the canvas is essentially a smaller view port of the larger image. I then want to allow that center point to move, thus creating the illusion that the viewport is viewing a different portion of the image.
Right now I've done this in sort of a hokey way where I redraw the portion of the image I want to see to the canvas, but I get this feeling that this isnt optimal. Is there a way to render the whole image to the canvas and then somehow "transform" my current center point so this view shift happens behind the scenes hopefully in some native layer?
You can add transformations to the context before drawing any image (rotation, scaling, translation...). What you need is the function context.translate(x,y).
Then, you only need to draw your image at (0,0)
For example, to display the bottom right portion of your image:
ctx.translate (-424, -450);
ctx.drawImage (image, 0, 0);
You can check this link https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations to see a lot of examples on context transformation.