I'm using paper.js to place an image on a paper.js canvas. I then copy that canvas's dataURL to create a new canvas. When I do so unless I hard code the position of the raster, it ends up in the wrong position, but drawn paths are in the correct position. Working codpene here
If I use paper's raster object syntax:
var image = new paper.Raster({
position: paper.view.center
})
It has no effect.
If I use paper's raster object syntax with a hard coded position it corrects the positionioning:
var image = new paper.Raster({
position: new paper.Point(400,600)
})
The image is corrected. Thanks in advance
Related
I want to compare a raster I made against Google's satellite basemap. I produced a georeferenced coloured TIFF with appropriately placed nodata where it should have. I then tiled this using gdal2tiles. When I overlay my custom TIFF on Google sat. map it works fine but my custom map is surrounded by a gray background instead of a transparent one.
I believe it's because swipe replaces the two layers altogether. Is there a way to achieve what I want properly?
You are probably using leaflet-side-by-side plugin?
In that case, and if you need the same background tiles in both sides, a very simple trick is to add that background Tile Layer to the map, but not to L.control.sideBySide. You can leave the left side as an empty array for example.
var backgroundTiles = L.tileLayer(backgroundTilesUrl).addTo(map);
// Tiles with transparent background
var customTransparentTiles = L.tileLayer(customTilesUrl}).addTo(map);
L.control.sideBySide([], customTransparentTiles).addTo(map);
Demo: http://jsfiddle.net/ve2huzxw/149/
If you need a different background tile layer on the right side (under your custom transparent tiles), simply create a new Tile Layer instance and pass an array of layers as 2nd argument of L.control.sideBySide.
Note: for some reason the left Tile Layer must be added last to the map.
var backgroundTilesRight = L.tileLayer(backgroundTilesRightUrl).addTo(map);
var backgroundTilesLeft = L.tileLayer(backgroundTilesLeftUrl).addTo(map);
// Tiles with transparent background
var customTransparentTiles = L.tileLayer(customTilesUrl).addTo(map);
L.control.sideBySide(
backgroundTilesLeft,
[
backgroundTilesRight,
customTransparentTiles
]).addTo(map);
Demo: http://jsfiddle.net/ve2huzxw/150/
I am experiencing a strange positioning issue when placing an overlay in my home city (Syracuse, NY). First the test map:
http://hotsdg.com/~downtown/map.html
This map uses the example code to place my image over newark. No problem here. The image is skewed and distorted of course, by placement occurs as expected.
The second map:
http://hotsdg.com/~downtown/map_two.html
This map uses the example code with coords adjusted to place the image over Syracuse, NY. At first glance the overlay appears to be missing. However, upon inspection I discovered that the element which is used for the overlay has it's top set to 94px (at the initial zoom), instead of 0px. Adjusting this manually brings the image into view.
Any thoughts as to what might be happening here, or more importantly, why it's happening?
A google.maps.LatLngBounds takes SW, NE LatLngs for the constructor.
Your working map does that (SW, NE):
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216, -74.213393),
new google.maps.LatLng(40.765641, -74.139235));
the not working one is (NW, SE):
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(43.054340, -76.159101),
new google.maps.LatLng(43.042504, -76.142601));
I'm trying Seadragon Ajax with coordinates system in order to show in my website large images with big resolution .
I would to view a part of this image knowing their coordinates. The problem is that when I make zoom or drag the image , coordinates no longer correspond to the same part of the image.
I try with some code but no way.I need that coordinates system is fix for all the image .
As i can do?
Thanks
Sure, no problem. You have to transform the "real" pixelbased coordinate to the seadragon point-coordinate.
"Seadragon Ajax uses a normalized coordinate system. The top-left of the image is always at the origin (0, 0) while the width of the image is always 1. The height of the image is dependant on the aspect ratio, so an image which is half as tall as it is wide will have a height of 0.5"
So, if you know that your image is 500x500px, then point 1,1 = 500px,500px and 0.5,0.5 = 250px,250px.
Convert by writing a function like this:
var my_position_x=333; // the position you want to get point for
var my_position_y=666; // the position you want to get point for
var width=500;
var height=500;
var pointx=1/width * my_position_x;
var pointy=1/height * my_position_y;
Here's my problem, I need to scale and clip images into square sized tiles to put into a tile list. Here's how I want it to work:
I want all my tiles to be, say, 300px x 300px.
For each image, I want to scale the shorter side (either width or height) to fit in the tile using the "letterbox" scaleMode (so that it maintains aspect ratio).
Then I want to position the image in the center and clip away anything left over from either both sides or the top and bottom.
Here's an example to help clarify:
I have an image with width=600px and height=1200px. First I want to scale the image to width=300px and height=600px (notice that aspect ratio is maintained), then center the image vertically and clip the image to 300 x 300.
Is this possible? This is actually a pretty standard way of displaying square thumbnails in many photo-based web sites, but I can't find a way to make it work in flex.
Any help would be appreciated, thanks!
UPDATE JUNE 2012:
Just in case anyone finds this thread now, this issue has been resolved in the latest version of the Flex SDK. On the spark image object there is a new scaleMode of "zoom" which does exactly what I've asked for here.
Take your big image and draw it on BitmapData with scale and reposition:
const zoom:Number = Math.max(THUMB_WIDTH/image.width, THUMB_HEIGHT/image.height);
const x:int = (THUMB_WIDTH - image.width*zoom)/2;
const y:int = (THUMB_HEIGHT - image.height*zoom)/2;
var matrix:Matrix = new Matrix;
matrix.scale(zoom, zoom);
matrix.translate(x, y);
var _thumbBitmap:BitmapData = new BitmapData(THUMB_WIDTH, THUMB_HEIGHT, false, 0xFFFFFF);
_thumbBitmap.draw(image, matrix, null, null, null, true);
Then assign resulting BitmapData to the source of the BitmapImage.
More: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#draw%28%29
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/primitives/BitmapImage.html#source
Clox answered my question of how to display huge graphics (e.g. greater than 8191 pixels).
I have the code to copy parts of a huge loaded BitmapData to a target BitmapData that is just the size that I can display.
I think I have set the scroll bars of an enclosing Canvas to show the size of the larger image and allow the user to scroll.
Now I need to put the selected pixels on the screen. When I try to add a Bitmap component as a child of the Canvas, it get an error because Bitmap is not a UIComponent.
What's the best way to put the target BitmapData into an Image component?
How else can I get the subset of pixels on the screen?
To display a BitmapData object use the Bitmap class. Then you can set the bitmap as the source of an image.
var imageBmp:Bitmap = new Bitmap(myBitmapData);
var displayImage:Image = new Image();
displayImage.source = imageBmp;
myCanvas.addChild(displayImage);
You could also draw the pixels of your bitmap data directly onto the Graphics object of the Canvas using beginBitmapFill.
var g:Graphics = myCanvas.graphics;
g.beginBitmapFill(myBitmapData);
g.drawRect(0, 0, myBitmapData.width, myBitmapData.height);