添加缩放重置和背景图拖拽

[mgzu]

1. 需要一个缩放重置 api。目前我使用以下方法重置缩放，不知是否合适。

        stage.scale = 1;
        stage.redraw()

2. init 后，暂未找到开启、关闭缩放的 api。
3. 开启拖拽后，元素的移动可超出画布边界，这个是否有对应的 api ，使元素无法移出画布边界。
4. 以下是我的配置，我想将 image 设置为背景图片且不可拖拽（fixed : true）。当使用缩放将画布放大时，却无法查看超出画布的背景图（fixed : false 也并不正确，背景图应当是无法移动的）。

    const stage = omg({
        element: document.getElementById('Canvas'),
        width: 750,
        height: 450,
        enableGlobalTranslate: true, // 开启全局拖拽
        enableGlobalScale: true, // 开启全局缩放
        position: 'absolute', // canvas.style.position
        prepareImage: true,
    });

    const image = stage.graphs.image({
        x: 0,
        y: 0,
        width: stage.width,
        height: stage.height,
        src: imgsrc,
        zindex: 0
    }).config({
        fixed: true
    });

[PengJiyuan]

1. 确实需要一个重置的api，现在我用到的重置和你一样，也是通过这种方法重置的。如果有事件的绑定和解绑，需要更多的操作，比较繁琐。 所以日后需要添加一个重置api，可以重置scale，translate，等所有数据到init时候的状态。

2. 可以开启和关闭全局拖拽或者全局缩放。如下：

const stage = omg(...settings);
stage.init();

// 改变enableGlobalScale
stage.enableGlobalScale = false;
stage._event.triggerEvents();

3. 暂时没有对边界的探测，之后再看看有什么好的办法添加吗？现在可以通过手动去计算边界，我想是可以做到是元素无法移动出边界的效果的。

4. fixed: true目前仅用来应付全局拖拽，即enableGlobalTranslate。fixed应该需要做到更多的事情，这个我会在之后的版本中对fixed进行升级。

可以尝试一下用 https://codepen.io/ 来展示你的demo，这样我可能更能清晰的明白你的意思。:)

[mgzu]

按照上述方法直接在 js 里写，是可以直接关闭缩放的。
点击按钮后，关闭、开启缩放，则无法实现。

let scaleeBtn = document.getElementById("scaleeReverseBtn");
if (stage.enableGlobalScale) {
    scaleeBtn.innerHTML = "开启缩放";
    stage.enableGlobalScale = false;
} else {
    scaleeBtn.innerHTML = "关闭缩放";
    stage.enableGlobalScale = true;
}
stage._event.triggerEvents();

案例：https://serch.gitee.io/canvas-event/examples/canvas-event.html
源码：https://gitee.com/serch/canvas-event
用的是 omg-v3.1.4，不过也测试了 4.0.0-beta.0，均无法实现关闭、开启缩放。
还有一点是，需要一个控制缩放的范围的 api。例如案例中，我想要的效果是 scale 最小为 1。
感谢解答！

[PengJiyuan]

我测了一下，无法关闭缩放是一个bug，我已经修复。ed06ae3

fixed确实实现的不好，我会改进。

[PengJiyuan]

在feature-4.0.0中添加了 setGlobalProps这个接口，用于设置OMG全局状态。所有的改动将在4.0.0版本放出，我计划在4.0.0中完善一些东西。

stage.setGlobalProps({
  enableGlobalTranslate: true,
  enableGlobalScale: false
});

你的代码可以改成下面这样：

    // 全局拖拽设置
    function translateReverse() {
	let translateBtn = document.getElementById("translateReverseBtn");
	stage.setGlobalProps({
	  enableGlobalTranslate: !stage.enableGlobalTranslate
	});
	translateBtn.innerHTML = stage.enableGlobalTranslate ? "开启拖拽" : "关闭拖拽";
    }

    // 缩放设置
    function scaleeReverse() {
	let scaleeBtn = document.getElementById("scaleeReverseBtn");
	stage.setGlobalProps({
	  enableGlobalScale: !stage.enableGlobalScale
	});
	scaleeBtn.innerHTML = stage.enableGlobalScale ? "开启缩放" : "关闭缩放";
    }

[mgzu]

感谢回答！
尝试使用 feature-4.0.0 分支下的 OMG 运行案例。发现现在不对 image 进行缩放，请问这个是需要单独配置了吗？

[PengJiyuan]

@mgzu ，现在的fixed是真正的fixed。如果指定了fixed的话，拖拽缩放会失效。

[PengJiyuan]

@mgzu 对了，添加了一个reset接口。stage.reset();

[mgzu]

@PengJiyuan 好的，那如何设置不可拖拽而可以缩放呢。

[PengJiyuan]

@mgzu 当然可以。

enableGlobalScale: true;
enableGlobalTranslate: false;

drag: false;

[mgzu]

@PengJiyuan 感谢回答，方法是有效的。
可是，有个问题是，关闭全局拖拽 enableGlobalTranslate: false;，设置图片 drag: true; 时，图片可以拖拽。而开启全局拖拽 enableGlobalTranslate: true; ，设置图片 drag: false; 时，图片仍然可以拖拽。
drag: false; 应当高于 enableGlobalTranslate: true 的设置 ，而表现的结果却并不是如此。
我想要的效果是当开启全局拖拽时，背景图片是无法拖拽的。
之前并没有表述清晰，不好意思。

[PengJiyuan]

fixed不行吗？

[mgzu]

需要的效果是：开启全局拖拽 enableGlobalTranslate: true 后，背景图片无法拖拽，而可以缩放。`

现在的情况是：

fixed : true; // 图片无法拖拽，无法缩放。
});

drag : false; // 图片可以拖拽，可以缩放。
});

这些都不符合要求。