I'm working on a basic design app where the user can upload images to a canvas, drag them around and resize them. The problem I have is resizing the image with a mouse drag. I'd like the user to position the mouse pointer on either corner of the bitmap image and drag either towards or away from the bitmap to resize it proportionally. I'd be grateful for any code or suggestions.
Lanny mentioned that you had this question here. ZIM, which is based on CreateJS has this functionality built in - it is called transform(). We also have an uploader built in called Loader().
Here is the code that you would use inside the ZIM template available on the code page at ZIM https://zimjs.com
const loader = new Loader().center();
loader.on("loaded", e=>{
e.bitmap.center().transform();
// or if you want multiple files
// loop(e.bitmaps, bitmap=>{
// bitmap.center().transform();
// });
loader.removeFrom();
stage.update();
});
Below is an image that has been loaded. You can try it here https://zimjs.com/explore/uploadresize.html. The transform interface will go away when the user clicks off the image and then comes back when they click on the image. There are various options for all of this that you can read about in the Docs available on the ZIM site.
All your regular CreateJS will work and you will find that ZIM is helpful in many other ways too! Aside from transform() there is drag() for normal dragging, and gesture() for pinch zoom and rotate - you would use one or the other of these not combined.
Related
i'm building an FMX app for iOS, it has a TImageViewer on a TPanel with the TImageVieweraligned to Contents. I load a bitmap from file into the TImageViewer and i can then pan around and zoom in/out on the image. Works fine.
What i want now is a button click event to reposition the left edge of the image on the left edge of the TPanel so it looks like the top image below.
Here is example of what it looks like when first loaded:
Here it is after i have panned it around:
I've searched and experimented all day but i just can't get it. I tried reloading the bitmap file but did nothing. Any suggestions?
thanks, russ
Found a way based on this delphi question. Note that ImageMap is the name of my TImageViewer on Form1.
TPointF myOffset;
myOffset = Form1->ImageMap->ViewportPosition; // this is (0,0) before the image is panned around, non-zero otherwise
Form1->ImageMap->ScrollBy(myOffset.X, myOffset.Y) ;
I am currently trying to make a map like canvas with buttons inside using SkiaSharp and Xamarin.Forms.
but when it comes to zoom / pan i can't sync this 2 up because when
a) im using a control with zoom / pan actions and canvas + buttons as childs with inverse scale, that mostly works but the skiasharp canvas will be blurry because it's only an element transform (bitmap scaling)
b) the buttons don't stay at the desired location when using the direct skiasharp canvas transform and a seperate content container for the buttons because (bad) transform syncing
any idea on how to combine this 2 components to a map with button markers like element?
My suggestion would be to use AbsoluteLayouts to stack Xamarin.Forms buttons (or Images with GestureRecognizers) over the top of a drawn SKCanvas. Each time a button is clicked you then have to eventually call InvalidateSurface() on the SKCanvas and it will redraw with the parameters that were changed by the clicking of the button. I'm doing this a lot in an app of mine and am very happy with it, you can see it over here.
I have just upgraded Unity to version 4.6 and tried to create a button by Create -> UI -> Button.
However, this button doesn't show up in #Screen tab but it does in Game tab.
Please look at the screen shoot below:
Another question is: The default width and height when creating a new button is 160 x 30. When I change the source image with my own image button, I have to change the width and height parameters in rect transform. Is there any faster way to automatically obtain new width and height based on the image which I insert?
Thank you very much!
First, double click the button in your hierarchy and see that it indeed does not show in the Scene view, excluding any kind of zoom problem. (By the way, I'm assuming you mean "Scene" and not "Screen", right?) Things in different cameras or canvases might have very different scales but appear correctly in the Game view. I don't know how used you are to Unity, so I'm sorry if this sounds obvious. :)
Next, check the dropdown labeled "Layers" on top of Unity's editor, to the right of the Play, Pause and Step buttons. See if the layer of your button (which in this case is "UI") is visible. It should have an open eye icon next to it.
Regarding your other question, after dragging your sprite to the Image component, you can press the "Set Native Size" button, which will set the size of your object to the dimensions of your Sprite. Regarding the new UI, I think this is as automatic as it gets. Note that "Set Native Size" will only appear if your Image type is set to Simple (probably what you want) or Filled in the component.
I had the same problem before and here's a possible solution.
By default, the editor camera (Scene Tab) renders the World Space,
so your Canvas component's render mode should be set to "World Space".
The problem may only occur when you're trying to (or supposedly) render your UI in Screen Space - Overlay or Screen Space - Camera in the Canvas component.
So if you want to properly edit UI objects in the scene tab/window; set the Canvas component's render mode to World Space.
We don't have this problem in Unity 4.x before because I think Unity automatically renders any render mode from the Canvas component, however, that doesn't happen in Unity 5.x. I'm guessing it's either intentional that they do that or it's a bug on Unity UI feature.
I need to know, which is the best way to blur the background of the Windows Phone 7 app to concentrate the user's attention on a "always on top" popup window.
My idea is:
Make an in-memory screenshot of the background grid (by turning it into a freezable or something).
Add an image that overlaps the background grid, but is below (with the z-index) the popup.
Still I doubt I will be able to overlap the application bar.
At this point, if you have a solution, please advise.
A few pointers for you ...
Unfortunately the Silverlight BlurEffect and other Bitmap effects didn't make it into Window Phone 7, so you will have to implement the blur yourself. This is actually pretty simple, just use a Gaussian Convolution Filter.
To achieve this effect you can capture the visuals of your application into a WriteableBitmap, manipulate the image to create your blur, then overlay this image over your application using a PopUp. I did something similar in a blog post I wrote about fly-out text animations here:
http://www.scottlogic.co.uk/blog/colin/2011/04/metro-in-motion-3-flying-titles/
Find your root visual as follows:
var rootElement = Application.Current.RootVisual as FrameworkElement;
Add a copy of this UI into a popup as follows:
_backgroundMask = new Rectangle()
{
Fill = new SolidColorBrush(Colors.Black),
Opacity = 0.0,
Width = rootElement.ActualWidth,
Height = rootElement.ActualHeight
};
_popupCanvas.Children.Add(_backgroundMask);
_targetElementClone = new Image()
{
Source = new WriteableBitmap(element, null)
};
_popupCanvas.Children.Add(_targetElementClone);
And show it:
_popup.IsOpen = true;
I'll leave you to work out how to blur the background!
As an aside, your will not be able to overlay or capture the application bar visuals. Hide it before performing this transformation.
Finally, blurring the background isn't really very 'Metro'. Are you sure you want to do this?
Instead of blurring just use a semi transparent layer over the top of the page.
You should hide the application bar before trying to create such an effect as you won't be able to place anything on top of it.
First of all I will explain my situation so you can know my problem a little better. I'm making a HTML5 app. I have a canvas, and using a color picker you can change the color of the canvas. Now i have a picture which I want to put on the canvas but that pictures color needs to be changed using a color picker. So i need to replace, lets say, black color on that picture and put it on the canvas so it dosnt screw up the background.
So that will look like this:
1st color picker- changes the color of the canvas
2nd color picker - replaces the black color on the image with the one in the color picker and puts it on the canvas
Now my problem is how to replace the color on the image without reloading the page.
My only condition is no using silverlight, flash, java or any other similar tehnology that need 3rd party software to be installed on the device.
Thanks in advance.
If you dont understand my query fully, feel free to ask.
My approach with a JS only solution could be:
Loading the image inside a canvas element. Look at the MDC canvas tutorial
Trigger the user click on the canvas and get the pixel color (see links below to know how to get the color of a pixel) and look at this answer to get the mouse position
Substitute all the colors in the canvas with the one the user pick. For some examples about pixel manipulation:
Pushing pixel with canvas at Mozilla Hacks
http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/
This JS at mezzoblue apply heavy filter to an image
After some canvas experiment I notice that mostly in all the browser the pixel manipulation with canvas could be very slow also with small images. So another experiment to do could be to get the pixel color and then:
pass the color information to a PHP (or another server side script) with an AJAX call
do the color manipulation with an image library like GD or imagemagik
return back your image with the Ajax response
reload your canvas with the modified version of the image