缩放和旋转织物后,在画布内移动对象

Move a object within the canvas after scaling and rotating fabrics

本文关键字:布内 移动 对象 旋转 缩放      更新时间:2023-09-26

我能够在画布边界内移动对象,当它被旋转/缩放时。请参阅以下网址- http://jsfiddle.net/JtRhX/33/

问题步骤:

  1. 缩放图像>比画布的宽度/高度。
  2. 问题1:尝试在任何方向移动对象仅1px,对象将立即到另一端,原因是对象:移动事件
  3. 问题2:缩放图像后,对象的移动也是反向的。

我使用下面的代码来检查顶部的边框定位,类似于bot

if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){
    obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
    obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
}

对于小提琴代码中的注释

//如果对象太大忽略

在这种情况下,您似乎希望允许越过画布的边缘。

如果是,你只需要改变这一行:

if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width) {

:

if(obj.getBoundingRect().height > canvas.height || obj.getBoundingRect().width > obj.canvas.width) {

请注意,obj.currentHeightobj.currentWidth未定义

希望有帮助!