画布旋转时的getbounds(getbounds when canvas rotate)

画布旋转时的getbounds(getbounds when canvas rotate)

如果触摸或不触摸，我需要获取画布内部图像的界限，但如果我旋转画布，则getbounds（）保持相同的值，如何在画布旋转后得到正确的值？

//CODE ON VIEW CLASS: canvas.save(); canvas.rotate(rotation, Xpos, Ypos); secHandImg.setBounds(left,top,right,bottom); secHandImg.setAntiAlias(true); secHandImg.draw(canvas); circleHandImg.setBounds(left,top,right,bottom); circleHandImg.setAntiAlias(true); circleHandImg.draw(canvas); canvas.restore(); //CODE ON FRAGMENT CLASS: public boolean onTouch(View view, MotionEvent event) { Rect imageBounds = MyClass.secHandImg.getBounds(); int action = event.getAction(); final int x = (int)event.getX(); final int y = (int)event.getY(); if(action == MotionEvent.ACTION_DOWN) { if(x >= imageBounds.left && x < (imageBounds.left + imageBounds.width()) && y >= imageBounds.top && y < (imageBounds.top + imageBounds.height())){ //THIS DON´T WORK IF CANVAS ROTATES imageBoundsTouch = true; } }

这里有一张图片来解释我的问题：

http://s11.postimg.org/z7j0xgwmb/Imagen_2.png

I need to get the bounds of an image that is inside a canvas to detec if has been touched or not, but if I rotate the canvas the getbounds() maintain the same values, how con I get the correct values after canvas rotate?

//CODE ON VIEW CLASS: canvas.save(); canvas.rotate(rotation, Xpos, Ypos); secHandImg.setBounds(left,top,right,bottom); secHandImg.setAntiAlias(true); secHandImg.draw(canvas); circleHandImg.setBounds(left,top,right,bottom); circleHandImg.setAntiAlias(true); circleHandImg.draw(canvas); canvas.restore(); //CODE ON FRAGMENT CLASS: public boolean onTouch(View view, MotionEvent event) { Rect imageBounds = MyClass.secHandImg.getBounds(); int action = event.getAction(); final int x = (int)event.getX(); final int y = (int)event.getY(); if(action == MotionEvent.ACTION_DOWN) { if(x >= imageBounds.left && x < (imageBounds.left + imageBounds.width()) && y >= imageBounds.top && y < (imageBounds.top + imageBounds.height())){ //THIS DON´T WORK IF CANVAS ROTATES imageBoundsTouch = true; } }

Here an image to explain better my issue:

http://s11.postimg.org/z7j0xgwmb/Imagen_2.png

最满意答案

您可以使用三角函数来获取旋转矩形的边界：

function BBoxDimensions(width,height,radianAngle){ var c = Math.abs(Math.cos(radianAngle)); var s = Math.abs(Math.sin(radianAngle)); return({ width: height * s + width * c, height: height * c + width * s }); }

并且您可以使用trig来获取旋转的边界框的XY：

// where cx/cy is the center of rotation of the target // and startingX/startingY is the starting xy of the unrotated target var x1 = startingX - cx; var y1 = startingY - cy; newX =cx+ x1*Math.cos(angle) - y1*Math.sin(angle); newY =cy+ y1*Math.cos(angle) + x1*Math.sin(angle);

You can use trigonometry to get the bounds of a rotated rectangle:

function BBoxDimensions(width,height,radianAngle){ var c = Math.abs(Math.cos(radianAngle)); var s = Math.abs(Math.sin(radianAngle)); return({ width: height * s + width * c, height: height * c + width * s }); }

And you can use trig to get the XY of the rotated bounding box:

// where cx/cy is the center of rotation of the target // and startingX/startingY is the starting xy of the unrotated target var x1 = startingX - cx; var y1 = startingY - cy; newX =cx+ x1*Math.cos(angle) - y1*Math.sin(angle); newY =cy+ y1*Math.cos(angle) + x1*Math.sin(angle);