Dart 颤振-如何使用画布围绕中心旋转图像

我正在尝试实现一个自定义的画师，它可以在画布上绘制图像（缩小版），并且绘制的图像可以旋转和缩放

我知道要缩放图像，我必须使用缩放方法缩放画布

现在的问题是如何在其中心（或任何其他点）旋转缩放图像。画布的旋转方法只允许在左上角旋转。

如图1所示，这可以通过移动坐标空间来实现。 平移是C1和C2之间的坐标差，与图2中A和B之间的坐标差完全相同。 使用一些几何公式，我们可以计算所需的平移，并按照以下方法生成旋转图像

ui.Image旋转图像（{ui.Image-Image，双角度}）{
var pictureRecorder=ui.pictureRecorder（）；
Canvas Canvas=Canvas（pictureRecorder）；
最终双r=sqrt（image.width*image.width+image.height*image.height）/2；
最终alpha=atan（image.height/image.width）；
最终β=α+角度；
最终位移=r*sin（β）；
最终位移Tx=r*cos（β）；
最终translateX=image.width/2-shiftX；
最终平移Y=image.height/2-移位；
canvas.translate（translateX，translateY）；
画布。旋转（角度）；
drawImage（image，Offset.zero，Paint（））；
将pictureRecorder.endRecording（）返回到图像（image.width、image.height）；
}

如果不想围绕图像中心旋转图像，可以使用这种方式。您不必关心画布相对于图像旋转的偏移量，因为绘制图像后画布会移回其原始位置

void rotate(Canvas c, Image image, Offset focalPoint, Size screenSize, double angle) {
  c.save();
  c.translate(screenSize.width/2, screenSize.height/2);
  c.rotate(angle);
  // To rotate around the center of the image, focal point is the
  // image width and height divided by 2
  c.drawImage(image, focalPoint*-1, Paint());
  c.translate(-screenSize.width/2, -screenSize.height/2);
  c.restore();
}

，解决方法是简单地将自己的旋转方法分成三行

void rotate(Canvas canvas, double cx, double cy, double angle) {
  canvas.translate(cx, cy);
  canvas.rotate(angle);
  canvas.translate(-cx, -cy);
}

---

因此，我们首先将画布移向要围绕其旋转的点。然后，我们沿着左上角（颤振的默认值）旋转，该轴在坐标空间中是所需的轴，然后将画布放回所需位置，并应用旋转。该方法非常有效，只需增加4次平移，旋转成本与原始方法相同。

看看这个@RaoufRahiche，我需要使用画布绘制进行旋转。你能解决这个问题吗@NatwarSinghhaven没有尝试过，但我能够用

Transform.rotate

和

Transform.translate

小部件解决我的问题。这是最干净的方法！如果添加一些数学细节来解释代码tho会更好。谢谢！这对我很管用！。对于那些好奇的人，我尝试使用Transform旋转一个元素。我最终应用的转换是：

Matrix4.identity（）…translate（Constants.elementCardHalfSize）…rotateY（initialRotateX）…translate（-Constants.elementCardHalfSize）

cx和cy是什么？@Scorb如果需要，可以称它们为

x

和

y

，我把它们叫做

cx

和

cy

，因为我希望我的轴心位于中心，因此是中心x和中心y