相关疑难解决方法(0)

情况:

在我的特定情况下,我有3D相框图像和2D照片.我希望2D照片使用CSS3变换功能(旋转,缩放,偏斜)匹配3D帧.

问题:

我无法使用手动方法精确匹配两者,也就是输入旋转值并观察它的作用.

理想的解决方案#1

存在在线视觉工具,可以拖动照片的角落(就像Photoshop一样),它可以为您提供正确的CSS3变换值.

理想的解决方案#2

存在非可视化工具 - 与之前相同,但您手动输入4点坐标(图像角),它会为您提供正确的CSS3变换值.

真正解决这个问题

如果没有这样的工具(我的搜索没有找到),我希望有人尝试解释它背后的数学,这样我就可以自己计算 - 如果有可能的话？

我为你准备了JSFiddle演示: Demo

/* Main issue here */

.transform {
  transform: rotateX(34deg) rotateZ(13deg) rotateY(-10deg) scaleY(1) scaleX(1) skewY(0deg) skewX(0deg) translateY(0px) translateX(20px);
  transform-origin: 50% 0% 0;
}
/* Supporting styles */

.container {
  position: relative;
  width: 500px;
  height: 500px;
}
.frame,
.photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.photo {
  top: 50px;
  left: 95px;
  right: 65px;
  bottom: …

我找到的图像描绘了我的问题:

用户可以在画布上选择四个点来裁剪图像的一部分而不是拉伸它.

如何在HTML5中做到这一点？drawImage函数(据我所知)仅适用于矩形(取x,y,宽度和高度值),因此我不能使用不规则形状.解决方案必须适用于每个现代浏览器,因此我不希望基于webgl或其他东西的东西.

编辑: 更多信息:这将是用于编辑图片的应用程序.我想让用户剪掉更大图片的某些部分并进行编辑.它类似于Paint,因此需要canvas来编辑像素.