I am trying to display an image that shows how much liquid is left in a container. So I have an image of "liquid", which is just an orange square, and I am programmatically changing the Height of this image here:
int newHeight = 802*finalPercent;
chem.getLayoutParams().height = newHeight;
And it is scaling properly, but when the image scales, it does so toward the center of the ImageView boundary.
This liquid image is supposed to be inside a static container image, so how can I make it scale but keep the image bottom at the bottom of the container?
Images:
https://ibb.co/Cn5t40m
https://ibb.co/z5YznFq
I've tried changing constraints to the outline, to the edge, to just about everything.
I've tried adjustViewBounds, to no effect.
I've tried every scaleType, to little or no effect.
<ImageView
android:id="#+id/chem"
android:layout_width="229dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:adjustViewBounds="true"
android:minWidth="572dp"
android:paddingBottom="0dp"
android:scaleType="fitXY"
android:scaleY="1"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/zero"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.193"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/zero"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/full" />
I want to scale the image and keep it at the bottom of the black outline "container" in the image, but it is scaling to center.
Alright. Figured it out.
Set my outside image (bounding box image) to FitEnd, and the inner image to scale to Center. Brought both images back to image editor and cut off all vertical extra transparent area. Set bottom constraint of inside image to bottom of bounding box image. Can now scale vertical and image bottom stays where it needs to be.
Related
I'm attempting to move the background image so that it's center is positioned in the center of the screen rather than in the top left corner. So far, this code attempts to center it but it's dependent on the size of the window and is inconsistent.
canvas.backgroundImage.left = -(canvas.backgroundImage.width / 2)
canvas.backgroundImage.top = -(canvas.backgroundImage.height / 2)
Any object in Fabric, including background images, can be centered with the center() method.
canvas.backgroundImage.center()
You can also call centerH() or centerV() for horizontal or vertical centering.
See http://fabricjs.com/docs/fabric.Object.html#center
I have an image which has a ratio of 1724:1078(width:height).
Now i need to center that image inside canvas which is 800:1078.
This scenario works perfect with the code bellow:
ctx.drawImage(this.leftImageResized, ((this.thumbnailWidth/2)-this.leftImageResized.width)/2, (this.thumbnailHeight-this.leftImageResized.height)/2);
But what i cannot figure out is how to position the image to the left of the canvas and to the right of the canvas, because the image is wider than the canvas itself.
What i basically need to achieve is placing the left side of the image in the beginning of the canvas and in the second scenario placing the right side of the image to the right side of the canvas.
I already tried the code bellow to position it to the left:
ctx.drawImage(this.leftImageResized, 0, 0);
But this code does not work as expected. Basically it crops out a part of the image, although the image is positioned to the left a part of the image to the left is outside of view...
EDIT: This question has not a single point common with the question pointed as a duplicate, i am not simulating a cover at all, at the contrary my image should be cut but in different context.
As you can see on the image bellow this scenario is the one i need to cover, the image can be much bigger, but i need it aligned to the left edge of the canvas and also to the right edge.
If I understand correctly here is a schema of your situation:
leftImageResized
|------------------|
canvas
|----|
=> left margin
|------|
If this representation is correct, the width of your left margin equals
(width image - width canvas) / 2
And thus replacing
((this.thumbnailWidth/2)-this.leftImageResized.width)/2
by
-(this.leftImageResized.width - this.thumbnailWidth)/2
Should solve it
I am building an online video editor. I need to allow the users to blur an area of movies. This must be done graphically, I mean user should be able to select an area of a video, using an screenshot, then the selected area must be blurred. Some thing like this
Is there anyway to map this selected area dimension and its distance from borders to the real values that must be applied to the video?
I mean four numbers, width, length, top, left will be provided using this plug in and I need to use these numbers to blur an area of videos.
I take an screenshot of video. In order to keep the aspect ratio, I will fix the width to 800px and let the height to be scaled up/down. It is clear that the width, length, top, left of the selected area of the screenshot is a factor of the width, length, top, left of the area that must be blurred in video. but I don't know how to get this factor. Besides that I don't know how to get the video resolution.
Thanks in advance.
Update
This is my PHP code that gets the selected area dimensions and offsets
$iLeft = $_POST['left'];
$iTop = $_POST['top'];
$iWidth = $_POST['width'];
$iHeight = $_POST['height'];
exec('ffmpeg -i '.$url.' -filter_complex "[0:v]scale=iw*sar:ih,setsar=1,split[bg][bb];[bb]crop='.$iWidth.'*iw/800:iw*'.$iHeight.'/800:'.$iWidth.'*iw/800:'.$iHeight.'*iw/800,boxblur=10[b0];[bg][b0]overlay='.$iLeft.'*W/800:'.$iTop.'*W/800"" '.$name.' > block.txt 2>&1');
$iLeft, $iTop, $iWidth, $iHeight are the left, top, width and height of the selected area via the image plugin.
It blurs many selected areas very well, but areas like this
The Image Left, Top, Width, Height is 257, 39.26666259765625, 10, 391
don't get blurred. Also a video with Dimension 207x207 didn't get blurred as well.
Running
ffprobe in.mp4 -loglevel quiet -select_streams v -show_entries stream=width,height,sample_aspect_ratio -of compact=p=0:nk=1
will produce an output that looks like this:
1280|720|1:1
The first entry is the video width, then the height, and finally the pixel or sample aspect ratio, shown as num:den so it's num/den. That's your video resolution.
With that info, the factor is video-width*sar/800. This assumes that you'll be scaling all anamorphic videos to square pixels using the scale and setsar filters, and that the 800px screenshot is undistorted as well. If you're using FFmpeg to scale screenshot, it's scale=800:ih*800/iw/sar
So FFmpeg value for area width is screenshot area width * video-width*sar/800.
and for FFmpeg Y co-ordinate is screenshot top * video-width*sar/800, and so on.
Assuming the code in the comment is for the screenshot, for the full-sized movie, it would be
"[0:v]scale=iw*sar:ih,setsar=1,split[bg][bb];[bb]crop=50*iw/800:50*iw/800:20*iw/800:10*iw/800,boxblur='min(min(cw/2\,ch/2)\,10)'[b0];
[bg][b0]overlay=20*W/800:10*W/800"
I've scaled the movie to make sure we're always dealing with a square-pixel video.
I'm new to SVG and I'm having trouble solving this problem :
I'm trying to create a system of points, rotating around a single axis, like a solar system.
The center point is a round div, placed to the center of the viewport with the help of the CSS calc function :
left: calc(50% - myDivWidth/2);
top: calc(50% - myDivHeight/2);
I placed SVG circles around this central point with the "cx" and "cy" attributes and everything works fine.
Here's the problem : when I resize the window, the div is automatically moved to stay at the center of the screen. But my SVG circles are not moving because the coordinate system doesn't stretch to the new size of the viewport. Now if I reload the page after resizing, everything is placed correctly again.
I thought I could recalculate the coordinates of my circles when a resize occurs but isn't it a bit heavy ?
All my circles are placed in a svg tag with a 100% height and width.
I hope you can help me with this ! Thanks !
If you add a viewBox attribute to your SVG, it will automatically be scaled to fit it's parent viewport (<div class="univers">).
<svg width="100%" height="100%" viewBox="-315 -315 630 630">
With this viewBox you can use (0,0) as the origin for your orbiting circles.
Demo here
I am trying to make an image resizer and cropper, but am having trouble with resizing it from a desired point.
Currently, you can resize (just changing the with+height of an <img> element) and move around the image (offsetting the top and left margins of the <img> element). The problem is once you move it and resize it again, it does so from the center of the image. I would like it to resize relative to the center of the crop window.
Here is an image of what I currently have (top) and what it should be like (bottom):
http://i.imgur.com/eAE4IEF.jpg
I have been unable to figure out the math of how to resize it and then move it so the origin is not in the center of the image, but in the center of the red window.
I would appreciate any help with this.
This is essentially scaling an individual point inside the image (the center of the crop box) by the given scale factor, which involves multiplying each of the coordinates of the point by that factor.
new_center_x = old_center_x * new_image_width/old_image_width
new_center_y = old_center_y * new_image_height/old_image_height
http://jsfiddle.net/jDXHz/5/
You can then shift both the image and the box back by the difference between the new and old position to keep the box stationary while the image scales around it.