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
Related
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 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.
I'm creating an Ionic 2 app wich the user has to select some points in screen and the values of these coordinates will be used in another screen with a different size. I tried to use rule of trhee/cross multiplication, but it gave me an aproximated value that isn't enough.
This is what I'm making, using values that looked good in one screen and using the same percentage for another screen with different size:
makePosition() {
let canvasRect = document.getElementById("shapeBoard").getBoundingClientRect();
let top = this.elementHead.nativeElement.style.top;
let left = this.elementHead.nativeElement.style.left;
this.elementHead.nativeElement.style.top = canvasRect.top + (canvasRect.height * 1.931634728536)/100 + "px";
this.elementHead.nativeElement.style.left = canvasRect.left + (canvasRect.width * 48.738582882804224)/100 + "px";
}
html: https://codepen.io/jmachado/pen/ybzNzr
Is there a way to change the circle div position dynamically to be always in same position over the image?
I hope these 5 steps will get you a precise positioning:
1) Make the circle position relative to the container the image is in.
2) Make sure the image width is 100% to its container.
3) Store top and left position as a percentage.
4) Set top and left as a percentage% than in px.
5) Make sure the image has no border or margin set, its container has no border or padding.
Percentage left and top will automatically adjust with screen resize without the need of any JavaScript.
Also when you set top and left, it will be relative to the top and left of the circle. You may need to center the circle to the given exact top/left percentage by adding a negative margin of its half of width to the circle.
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.