Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

« Newer Snippets
Older Snippets »
Showing 1-3 of 3 total  RSS 

Zoom into SVG

This code is a complete SVG document which can be copied and pasted into a file saved as an SVG document (eg. makeZoom.svg) and run locally within your SVG compliant web browser. When the user clicks on the yellow rectangle the shape will increase in size giving the appearance that the document has just been zoomed in.

<svg	xmlns="http://www.w3.org/2000/svg" width="100%"
		xmlns:xlink="http://www.w3.org/1999/xlink" id="cont" viewBox="0 0 300 100">
  <g>	
    <g id="sketch" class="sketch">
      <rect x="130"
  y="6" width="20px" height="10px" fill="yellow" onclick="zoomIn()" />
    </g>
  </g>

  <script>
  <![CDATA[
  function zoomIn(){

    document.getElementById('sketch').parentNode.setAttribute('transform','translate(-70  ,-6)')
    document.getElementById('sketch').setAttribute('transform','scale(1.5)')
  }
  ]]>
  </script>
</svg>



I started off experimenting with viewBox however for simplicity, transform seems better suited for zoom, and panning.

Reference:
Coordinate Systems, Transformations and Units - SVG 1.1 - 20030114 [w3.org]
Example for viewbox control [carto.net]

J2ME - Rescale Image

// description of your code here

private Image rescaleImage(Image image, int width, int height)
	{
		int sourceWidth = image.getWidth();
		int sourceHeight = image.getHeight();
	
		Image newImage = Image.createImage(width, height);
		Graphics g = newImage.getGraphics();
		
		for(int y=0; y<height; y++)
		{
			for(int x=0; x<width; x++)
			{
				g.setClip(x, y, 1, 1);
				int dx = x * sourceWidth / width;
				int dy = y * sourceHeight / height;
				g.drawImage(image, x-dx, y-dy, Graphics.LEFT | Graphics.TOP);
			}
		}
		
		return Image.createImage(newImage);
	}

Image/canvas bliting

I can't remember how to call the blit method.
So, here's just a personal reminder.
(BTW, the pys60 doc has a wrong order between target and source)
app.body = c = Canvas()
w,h = 20,20
im = Image.new(size=(w,h))

# here's prototype
# blit(im, source=(0,0,w,h), target=(0,0), mask=None, scale=0)
# here are examples
c.blit(im)  # put entire image on top-left
c.blit(im, target=(70,70)) # put it about mid-screen
c.blit(im, (0,0,w/2,h/2))  # put a quater image on top-left

# double the image size and put it about mid-screen
c.blit(im, target=(60,60,100,100), scale=1)

If scale is not specified and source <> target, the image
will be clipped instead of resized.

mask is a 1-bit image with the same size as image.
mask = Image.new((w,h),'1')

Pixel on the image will be copied if the same pixel
on the mask is 'white'.
So we can use mask to make 'Sprite'.
« Newer Snippets
Older Snippets »
Showing 1-3 of 3 total  RSS