我已经将一个图像(已调整大小的图像)添加到画布并对其应用了缩放和旋转操作 . 画布宽度为380px,高度为217.143px .
情况1) . 仅应用缩放后的Json:
[{"objects":[{"type":"image","originX":"left","originY":"top","left":-39,"top":-62.76,"width":1000,"height":667,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.83,"scaleY":0.83,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"http:\/\/127.0.0.1\/greatcanvasprints\/web\/media\/designtool\/canvasprints\/single-print\/1813\/small_=_=_=26961_1499666667USA91235_1of12_1Panel_8x8_0-_-_-0_test.75_BorderColor_HooksforHanging_Original_1pcs_P_","filters":[],"resizeFilters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}],"background":null}]
案例2) . 应用缩放和旋转后的Json:
[{"objects":[{"type":"image","originX":"left","originY":"top","left":278.28,"top":-275.14,"width":1000,"height":667,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.83,"scaleY":0.83,"angle":45,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"http:\/\/127.0.0.1\/greatcanvasprints\/web\/media\/designtool\/canvasprints\/single-print\/1813\/small_=_=_=26961_1499666667USA91235_1of12_1Panel_8x8_0-_-_-0_test.75_BorderColor_HooksforHanging_Original_1pcs_P_","filters":[],"resizeFilters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}],"background":null}]
我想在PHP中对原始图像执行相同的操作而我只需要设计区域(画布区域) . 下面是PHP中的一些代码:
Php Code在第一种情况下运行良好:仅应用缩放
get Original File
$originalImg = imagecreatefromjpeg('26961_1499666667USA91235_1of12_1Panel_8x8_0-_-_-0_test.75_BorderColor_HooksforHanging_Original_1pcs_P_');
Here is width and height (pixels) of resized image which used in canvas
$inToolUsedFileWidth = 1000;
$inToolUsedFileHeight = 667;
here is width & height (pixels) of Original File
$originalFileWidth = 5760;
$originalFileHeight = 3840;
$scaleX = 0.83
$scaleY = 0.83
$ratioWidth = ($originalFileWidth/$inToolUsedFileWidth) * (1 / $scaleX);
$ratioHeight = ($originalFileHeight/$inToolUsedFileHeight) * (1 / $scaleY);
380 default canvas width
$canvasWidth = 380 * $ratioWidth;
217.143 default canvas height
$canvasHeight = 217.143 * $ratioHeight;
same As first json value
$left = -39;
$top = -62.76;
$croppArr = array('x' => (abs($left) * $ratioWidth),'y' => (abs($top) * $ratioHeight),'width' => $canvasWidth,'height' => $canvasHeight);
$croppedImg = $this->imageCrop($originalImg,$croppArr);
只有缩放才能正常工作
案例2:应用旋转后
但是应用旋转时,我只是旋转原始图像 . 但是没有获得在画布上设计的精确设计部分 .
$originalImg = imagecreatefromjpeg('26961_1499666667USA91235_1of12_1Panel_8x8_0-_-_-0_test.75_BorderColor_HooksforHanging_Original_1pcs_P_');
// Same as second Json angle value
$antiRotation = (float) -(45); // here anti clockwise rotation in php so prepend nagetive value
$originalImg = imagerotate($originalImg,$antiRotation,0);
然后使用上面的代码,并按照每秒json更改左侧和顶部值 .
没有得到在画布上设计的确切输出 .
我想知道在Fabric Js中旋转后我们如何重新计算对象的左侧和顶部位置 .
在第一种情况下:左= -39,顶部= -62.76,角度= 0
在第二种情况下:左= 278.28,上= -275.14和角= 45
旋转后,哪个逻辑应用于左侧和顶部位置 .
我想用PHP做同样的事情 .
由于尺寸较大,无法附加原始图像 .
1 回答
我不知道你使用的是什么php工具 . 您应该只读取fabricjs中转换管道的数学并复制它 .
1)将面料设置为originX,originY'center','center' . 这将简化逻辑 .
2)一旦完成顶部,图像的左侧将是确切的中心
3)在php中移动到中心(上,左)
4)旋转画布
5)缩小适量
6)在-width / 2,-height / 2处绘制图像
或者,如果您的php工具允许使用变换矩阵,则复制fabricjs方法
object.calcTransformMatrix
将结果应用到画布,在-width / 2,-height / 2处绘制图像 .