I am having issue here with imageView touch. I have two imageview inside a FrameLayout. Consider both images are rectangle and overlap to each other.
Image 1 is touchable, draggable and movable
Image 2 is not movable
When I touch the Image 1 area, it will move correctly. However, when I touch Image 2 area which is overlap between Image 1, it cause the Image 1 to move. I have try to detect touch by Id and Tag but it is still saying I am touching Image 1
I want to prevent/restrict Image 1 from moving when touching Image 2 overlap area. How can I achieve this? Image 2 can be a custom shape, view or canvas also.
I am putting in XML
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/frm"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="1" >
<ImageView
android:id="#+id/imgTest1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:tag="img1"
android:src="#drawable/a">
</ImageView>
<ImageView
android:id="#+id/imgTest2"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="matrix"
android:tag="img2"
android:src="#drawable/b">
</ImageView>
</FrameLayout>
</LinearLayout>
Image 1 touch event
setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (v.getTag() != null && v.getTag().equals("img1")) {
ImageView view = (ImageView) v;
// Handle touch events here...
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
savedMatrix.set(matrix);
start.set(event.getX(), event.getY());
mode = DRAG;
lastEvent = null;
break;
case MotionEvent.ACTION_POINTER_DOWN:
oldDist = spacing(event);
if (oldDist > 10f) {
savedMatrix.set(matrix);
midPoint(mid, event);
mode = ZOOM;
}
lastEvent = new float[4];
lastEvent[0] = event.getX(0);
lastEvent[1] = event.getX(1);
lastEvent[2] = event.getY(0);
lastEvent[3] = event.getY(1);
d = rotation(event);
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
mode = NONE;
lastEvent = null;
break;
case MotionEvent.ACTION_MOVE:
if (mode == DRAG) {
// ...
matrix.set(savedMatrix);
matrix.postTranslate(event.getX() - start.x, event.getY()
- start.y);
} else if (mode == ZOOM && event.getPointerCount() == 2) {
float newDist = spacing(event);
matrix.set(savedMatrix);
if (newDist > 10f) {
float scale = newDist / oldDist;
matrix.postScale(scale, scale, mid.x, mid.y);
}
if (lastEvent != null) {
newRot = rotation(event);
float r = newRot - d;
matrix.postRotate(r, view.getMeasuredWidth() / 2,
view.getMeasuredHeight() / 2);
}
}
break;
}
view.setImageMatrix(matrix);
return true;
}
else
return false;
}
});
Thank you.
I believe the problem is here:
if (v.getTag() != null && v.getTag().equals("img1")) {
ImageView view = (ImageView) v;
You are checking if the tag of the view is equal to img1 and then do your work. However I can't see anywhere that you are checking if the view is equal to img2 (as stated in your xml).
You should add this after you are finished with your above if statement and do the appropriate work inside it:
else if (v.getTag() != null && v.getTag().equals("img2")) {
//do work here
}
Related
I have an imageview which I want to rotate, zoom and scale down or up and drag on user touch. So far all things are working perfect and in good way.
I have followed this code and some code others to get best result. now I want the image that is to be drag , move , zoom and rotate should be align to parents bottom. but when I Apply scale type to matrix the image shows on the top left corner on the screen when the screen is started. here is part of this code and you can also check in the link I shared, that guy is also using matrix as a scale type.
<ImageView
android:id="#+id/iv_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:src="#drawable/groom01"
android:scaleType="matrix"
/>
if I remove the matrix as scale type it comes down but in the center but not in the bottom. and as i touch the imageview its looks like the matrixs get applied the picture flickers for a single sharp moment and comes again where we touch.
The flickering i due to the matrixs I believe which is set in the code also ,I think the image tries to go to left top of screen but comes down where we have clicked.
here is the part in on touch
#Override
public boolean onTouch(View v, MotionEvent event) {
ImageView view = (ImageView) v;
view.setScaleType(ImageView.ScaleType.MATRIX);
float scale;
// Dump touch event to log
// dumpEvent(event1);
// Handle touch events here...
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN: //first finger down only
savedMatrix.set(matrix);
start.set(event.getX(), event.getY());
Log.d(TAG, "mode=DRAG" );
mode = DRAG;
break;
case MotionEvent.ACTION_POINTER_DOWN:
oldDist = spacing(event);
if (oldDist > 10f) {
savedMatrix.set(matrix);
midPoint(mid, event);
mode = ZOOM;
}
lastEvent = new float[4];
lastEvent[0] = event.getX(0);
lastEvent[1] = event.getX(1);
lastEvent[2] = event.getY(0);
lastEvent[3] = event.getY(1);
d = rotation(event);
break;
case MotionEvent.ACTION_UP: //first finger lifted
case MotionEvent.ACTION_POINTER_UP: //second finger lifted
mode = NONE;
Log.d(TAG, "mode=NONE" );
break;
case MotionEvent.ACTION_MOVE:
if (mode == DRAG) {
toggleSaveButtonState();
// ...
matrix.set(savedMatrix);
// matrix.postTranslate(event.getX() - start.x, event.getY()
// - start.y);
matrix.getValues(matrixValues);
matrixX = matrixValues[2];
matrixY = matrixValues[5];
width = matrixValues[0] * (((view).getDrawable()
.getIntrinsicWidth() / 2));
height = matrixValues[4] * (((view).getDrawable()
.getIntrinsicHeight() / 2));
dx = event.getX() - start.x;
dy = event.getY() - start.y;
float newX = event.getX() - start.x;
Log.v("bounds out", "matrixsX=" + matrixX+ " dx" + dx);
//if image will go outside left bound
if (matrixX + dx < 0-width){
dx = -matrixX-width;
Log.v("bounds", "matrixsX=" + matrixX + " dx" + dx + " width" + width + "image width = " + view.getWidth()/2);
// if (dx != -0.0) {
//
// // dx=(float)-0.0;
// }}
}
//if image will go outside right bound
if (matrixX + dx + width > view.getWidth()) {
dx = view.getWidth() - matrixX - width;
Log.v("bounds", "matrixsX=" + matrixX + " dx" + dx + " width" + width + "image width = " + view.getWidth());
}
//if image will go oustside top bound
if (matrixY + dy < 0) {
dy = -matrixY;
}
//if image will go outside bottom bound
if (matrixY + dy + height > view.getHeight()) {
dy = view.getHeight() - matrixY - height;
}
matrix.postTranslate(dx, dy);
} else if (mode == ZOOM && event.getPointerCount() == 2) {
float newDist = spacing(event);
matrix.set(savedMatrix);
if (newDist > 10f) {
scale = newDist / oldDist;
float[] values = new float[9];
matrix.getValues(values);
float currentScale = values[Matrix.MSCALE_X];
if (scale * currentScale > MAX_ZOOM) {
scale = MAX_ZOOM / currentScale;
}
else if (scale * currentScale < MIN_ZOOM)
{ scale = MIN_ZOOM / currentScale;}
matrix.postScale(scale, scale, mid.x, mid.y);
}
if (lastEvent != null) {
newRot = rotation(event);
float r = newRot - d;
matrix.postRotate(r, view.getMeasuredWidth() / 2,
view.getMeasuredHeight() / 2);
}
}
break;
}
you can see the second line is
view.setScaleType(ImageView.ScaleType.MATRIX);
so if I do comment it , then Image view is unable to move rotate or to do anything.
so what I am supposed to do in this condition ? How can I set it to the bottom of screen and when the user touch it , he may be able to take it anywhere where he wants . Please show me a way to do it.
Just move image initially using matrix.postTranslate(leftOffset, topOffset); after it loaded.
See more info here
In my application i want to get image x and y coordinates after drag and zoom the image. So I am using the following code.In my xml i have taken relative layout.This is relative layout.
<RelativeLayout
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/buttonlayout"
android:layout_marginTop="0dp" >
</RelativeLayout>
In this relative layout i want to drag the image and zoom the image.So that's why I have created Image view programatically and apply the touch listener to that image view.This is the oncreate code.
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.inventory_submit_images_activity);
relImage=(RelativeLayout) findViewById(R.id.image);
imgMarker = new ImageView(this);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT,
RelativeLayout.LayoutParams.FILL_PARENT);
params.leftMargin = 0;
params.topMargin = 0;
relImage.addView(imgMarker, params);
imgMarker.setScaleType(ImageView.ScaleType.MATRIX);
bmdragImage=BitmapFactory.decodeResource(getResources(), R.drawable.image_marker);
height = bmdragImage.getHeight();
width = bmdragImage.getWidth();
imgMarker.setImageBitmap(bmdragImage);
imgMarker.setOnTouchListener(this);
}
And this is the ontouch method and related methods.
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
ImageView view = (ImageView) v;
view.setScaleType(ImageView.ScaleType.MATRIX);
float scale = 0;
layoutParamss = (RelativeLayout.LayoutParams)
v.getLayoutParams();
// Handle touch events here...
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN: // first finger down only
x=(int) event.getX();
y=(int) event.getY();
savedMatrix.set(matrix);
start.set(event.getX(), event.getY());
Log.d(TAG, "mode=DRAG"); // write to LogCat
mode1 = DRAG1;
break;
case MotionEvent.ACTION_UP: // first finger lifted
x_cordinate=(int) event.getX();
y_cordinate=(int) event.getY();
Log.e("x_cordinate==",""+x_cordinate+" "+bmdragImage.getHeight());
Log.e("y_cordinate==",""+y_cordinate+" "+bmdragImage.getWidth());
break;
case MotionEvent.ACTION_POINTER_UP: // second finger lifted
mode1 = NONE1;
Log.d(TAG, "mode1=NONE1");
break;
case MotionEvent.ACTION_POINTER_DOWN: //second finger down..
oldDist = spacing(event);
Log.d(TAG, "oldDist=" + oldDist);
if (oldDist > 10f) {
savedMatrix.set(matrix);
midPoint(mid, event);
mode1 = ZOOM1;
Log.d(TAG, "mode=ZOOM" );
}
break;
case MotionEvent.ACTION_MOVE:
Log.e("ACTION_MOVE","ACTION_MOVE");
if (mode1 == DRAG1){
matrix.set(savedMatrix);
matrix.postTranslate(event.getX() - start.x, event.getY() - start.y); // create the transformation in the matrix of points
}
else if (mode1 == ZOOM1){
// pinch zooming
float newDist = spacing(event);
Log.d(TAG, "newDist=" + newDist);
if (newDist > 5f){
matrix.set(savedMatrix);
scale = newDist / oldDist; // setting the scaling of the image..
matrix.postScale(scale, scale, mid.x, mid.y);
height=(int) (bmdragImage.getHeight()*scale);
width=(int) (bmdragImage.getWidth()*scale);
Log.e("height int===="+scale,""+height);
Log.e("width int====="+scale,""+width);
}
}
break;
}
view.setImageMatrix(matrix); // display the transformation on screen
return true; // indicate event was handled
}
/** Determine the space between the first two fingers */
private float spacing(MotionEvent event) {
float x = event.getX(0) - event.getX(1);
float y = event.getY(0) - event.getY(1);
return FloatMath.sqrt(x * x + y * y);
}
/** Calculate the mid point of the first two fingers */
private void midPoint(PointF point, MotionEvent event) {
float x = event.getX(0) + event.getX(1);
float y = event.getY(0) + event.getY(1);
point.set(x / 2, y / 2);
}
This code is dragging and zooming is working fine. But my problem is getting x coordinate and y coordinate after drag the image.These x and y values are getting wrong. Because where ever i touch the image with in the relative layout, dragging is working.Because of these code in oncreate of image view params. So x and y values are getting wrong.
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT,
RelativeLayout.LayoutParams.FILL_PARENT);
If i change the image layout params to wrap contnet like the bellow,the image dragging is with in that area only. And zooming also not working properly. But my requirement is drag the image total relative layout.And get the x and y coordinates of image view.
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
Suggestions are appreciated..
I need to implement zooming, panning and then reset the ImageView to original scale/location. I use view.setImageMatrix(matrix) to perform zooming and moving in FrameLayout. Works perfectly so far. To restore to original layout, I tried to save the original matrix and reset to it, It doesn't work and I am kinda stuck. Appreciate any suggestions or tips!
The following are my current code:
a ViewPager contains fragments per Image
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
The fragment contains ImageView
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/ivPage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:scaleType="matrix"
android:src="#drawable/catalogue_test" />
</FrameLayout>
The java code does the zooming and panning work just fine, that actually was original from a tutorial page:
#Override
public boolean onTouch(View v, MotionEvent event) {
ImageView view = (ImageView) v;
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
Log.d(tag, "ACTION_DOWN");
isDoubleTap = false;
savedMatrix.set(matrix);
start.set(event.getX(), event.getY());
Log.d(tag, "mode=DRAG");
mode = DRAG;
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
Log.d(tag, "ACTION_POINTER_UP");
mode = NONE;
Log.d(tag, "mode=NONE");
break;
case MotionEvent.ACTION_MOVE:
Log.d(tag, "ACTION_MOVE");
if (mode == DRAG) {
matrix.set(savedMatrix);
matrix.postTranslate(event.getX() - start.x, event.getY() - start.y);
} else if (mode == ZOOM) {
double newDist = spacing(event);
Log.d(tag, "newDist=" + newDist);
if (newDist > 10f) {
matrix.set(savedMatrix);
float scale = (float) (newDist / oldDist);
matrix.postScale(scale, scale, mid.x, mid.y);
}
}
if(isDoubleTap == false) {
view.setImageMatrix(matrix);
Log.d(tag, String.format("(%d, %d) - scale(%f, %f) xy(%f, %f)", view.getTop(), view.getLeft(), view.getScaleX(), view.getScaleY(), view.getX(), view.getY()));
}
break;
case MotionEvent.ACTION_POINTER_DOWN:
oldDist = spacing(event);
Log.d(tag, "oldDist=" + oldDist);
if (oldDist > 10f) {
savedMatrix.set(matrix);
midPoint(mid, event);
mode = ZOOM;
Log.d(tag, "mode=ZOOM");
}
break;
}
gestureDetector.onTouchEvent(event);
return true; // indicate event was handled
}
I didn't have any luck with the setImageMatrix(new Matrix()) method, but setting the scale type then resetting it worked.
setScaleType(ScaleType.CENTER_CROP);
setScaleType(ScaleType.MATRIX);
I know this is old but here is my answer.
1-)get startedMatrix of imageView onCreate method
2-)and changed ACTION_POINTER and ACTION_POINTER_UP method to these
--- case MotionEvent.ACTION_UP: // first finger lifted
mode = NONE;
break;
case MotionEvent.ACTION_POINTER_UP:// second finger lifted
fingerLifted();
matrix.set(startedMatrix);
view.setScaleType(ImageView.ScaleType.MATRIX);
mode = NONE;
Log.d(TAG, "mode=NONE");
break;
I hope this will help.
Isn't the original imageView Matrix simply an identity matrix?
imageView.setImageMatrix(new Matrix()); -- this will be a matrix with no translations/scales/etc aka the default/original matrix
Based on my research...
to reset ImageView to original Scale/Position
try this very simple code... just put this
setCotentView(R.layout.activity_image);
This will reset your ImageView from the start :) and it will work.
I have two images inside my layout. I need to zoom that image which i touched. We know that Frame can display a single view at a time. So how do i perform zoom on each imageview separately ? My xml file :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:src="#drawable/image1" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" android:src="#drawable/image2"
/>
</FrameLayout>
Activity file :
public class MyActivity extends Activity implements OnTouchListener
{
private static final String TAG = "Touch";
// These matrices will be used to scale points of the image
Matrix matrix = new Matrix();
Matrix savedMatrix = new Matrix();
// The 3 states (events) which the user is trying to perform
static final int NONE = 0;
static final int DRAG = 1;
static final int ZOOM = 2;
int mode = NONE;
// these PointF objects are used to record the point(s) the user is touching
PointF start = new PointF();
PointF mid = new PointF();
float oldDist = 1f;
private ImageView iv1;
private ImageView iv2;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
iv1 = ((ImageView)findViewById(R.id.imageView1));
iv1.setOnTouchListener(this);
iv2 = ((ImageView)findViewById(R.id.imageView2));
iv2.setOnTouchListener(this);
}
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (v.getId()) {
case R.id.imageView1:
zoomImageView(v, event);
break;
case R.id.imageView2:
zoomImageView(v, event);
break;
default:
break;
}
return true;
}
private boolean zoomImageView(View v, MotionEvent event) {
ImageView view = (ImageView) v;
view.setScaleType(ImageView.ScaleType.MATRIX);
float scale;
switch (event.getAction() & 255)
{
case MotionEvent.ACTION_DOWN: // first finger down only
savedMatrix.set(matrix);
start.set(event.getX(), event.getY());
Log.d(TAG, "mode=DRAG"); // write to LogCat
mode = DRAG;
break;
case MotionEvent.ACTION_UP: // first finger lifted
case 6: // second finger lifted
mode = NONE;
Log.d(TAG, "mode=NONE");
break;
case 5: // first and second finger down
oldDist = spacing(event);
Log.d(TAG, "oldDist=" + oldDist);
if (oldDist > 5f) {
savedMatrix.set(matrix);
midPoint(mid, event);
mode = ZOOM;
Log.d(TAG, "mode=ZOOM");
}
break;
case MotionEvent.ACTION_MOVE:
if (mode == DRAG)
{
matrix.set(savedMatrix);
matrix.postTranslate(event.getX() - start.x, event.getY() - start.y); // create the transformation in the matrix of points
}
else if (mode == ZOOM)
{
// pinch zooming
float newDist = spacing(event);
Log.d(TAG, "newDist=" + newDist);
if (newDist > 5f)
{
matrix.set(savedMatrix);
scale = newDist / oldDist; // setting the scaling of the
// matrix...if scale > 1 means
// zoom in...if scale < 1 means
// zoom out
matrix.postScale(scale, scale, mid.x, mid.y);
}
}
break;
}
view.setImageMatrix(matrix); // display the transformation on screen
return true; // indicate event was handled
}
private float spacing(MotionEvent event)
{
float x = event.getX(0) - event.getX(1);
float y = event.getY(0) - event.getY(1);
return FloatMath.sqrt(x * x + y * y);
}
/*
* --------------------------------------------------------------------------
* Method: midPoint Parameters: PointF object, MotionEvent Returns: void
* Description: calculates the midpoint between the two fingers
* ------------------------------------------------------------
*/
private void midPoint(PointF point, MotionEvent event)
{
float x = event.getX(0) + event.getX(1);
float y = event.getY(0) + event.getY(1);
point.set(x / 2, y / 2);
}
}
Now i'am able zoom only image1 which is on top. How do i get the zoom functionality for bottom image on touch of image2 ? I should be able to zoom the image on which i touched. Please help me.
You can use LinearLayout and align them horizontally or vertically in this way you will have two imageviews which are independent with each other
then use gestureimageview which supports panning zooming and and double tap see link below....
hope this answers your question :D
Click here!
https://github.com/jasonpolites/gesture-imageview
Use ZoomageView instead of ImageView.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<com.jsibbold.zoomage.ZoomageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:src="#drawable/image1" />
<com.jsibbold.zoomage.ZoomageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:src="#drawable/image2" />
</FrameLayout>
Add dependencies :
implementation 'com.jsibbold:zoomage:1.1.0'
Hope this will help you.
I have an image view, after zoom(pinch zoom) i have to get the ends of the image.
i.e. when i drag the image left or right i have to fire an event when reached to the last point(after which it cannot be dragged).
I have used the zoom like this.
public boolean onTouch(View v, MotionEvent event) {
ImageView view = (ImageView) v;
// Dump touch event to log
dumpEvent(event);
// Handle touch events here...
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
savedMatrix.set(matrix);
start.set(event.getX(), event.getY());
Log.d(TAG, "mode=DRAG");
mode = DRAG;
break;
case MotionEvent.ACTION_POINTER_DOWN:
oldDist = spacing(event);
Log.d(TAG, "oldDist=" + oldDist);
if (oldDist > 10f) {
savedMatrix.set(matrix);
midPoint(mid, event);
mode = ZOOM;
Log.d(TAG, "mode=ZOOM");
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
mode = NONE;
Log.d(TAG, "mode=NONE");
break;
case MotionEvent.ACTION_MOVE:
if (mode == DRAG) {
// ...
matrix.set(savedMatrix);
matrix.postTranslate(event.getX() - start.x,
event.getY() - start.y);
}
else if (mode == ZOOM) {
float newDist = spacing(event);
Log.d(TAG, "newDist=" + newDist);
if (newDist > 10f) {
matrix.set(savedMatrix);
float scale = newDist / oldDist;
matrix.postScale(scale, scale, mid.x, mid.y);
}
}
break;
}
view.setImageMatrix(matrix);
return true; // indicate event was handled
}
When you originally load your image into the ImageView record a point of reference, either top left corner or the center (x, y). Every time you drag or zoom you image update the changes in regards to that point of reference; i.e. if you drag the image a pixels on the x axis and b pixels on the y axis your new point of reference will be at (x + a, y + b).
Check this link for more details. And this as well.