92 lines
2.9 KiB
JavaScript
92 lines
2.9 KiB
JavaScript
//@ts-nocheck
|
|
import { addEventlistener } from '@zhst/func';
|
|
import { EVENT_WHEEL } from "./constants";
|
|
import { EVENT_VIEWER_TRANSFORM_CHANGE } from "../viewer/constants";
|
|
export default {
|
|
initBridge: function initBridge() {
|
|
var _this = this;
|
|
var container = this.container,
|
|
element = this.element,
|
|
_this$eventHandleList = this.eventHandleList,
|
|
eventHandleList = _this$eventHandleList === void 0 ? [] : _this$eventHandleList,
|
|
option = this.option;
|
|
if (this.options.viewer) {
|
|
var viewer = this.options.viewer;
|
|
//添加缩放事件
|
|
var handleWhele = addEventlistener(container, EVENT_WHEEL, this.onWheel.bind(this));
|
|
eventHandleList.push(handleWhele);
|
|
//添加事件监听 获取limit crop box & 渲染canvas
|
|
this.onTransformChange(viewer);
|
|
this.limited = true;
|
|
var handleTransformChange = addEventlistener(viewer.element, EVENT_VIEWER_TRANSFORM_CHANGE, function (event) {
|
|
_this.onTransformChange(viewer);
|
|
});
|
|
eventHandleList.push(handleTransformChange);
|
|
}
|
|
},
|
|
onTransformChange: function onTransformChange(viewer) {
|
|
if (!viewer.image) return;
|
|
var _viewer$image = viewer.image,
|
|
imgWidth = _viewer$image.width,
|
|
imgHeight = _viewer$image.height;
|
|
var _ref = viewer.targetTransform || {},
|
|
_ref$rotate = _ref.rotate,
|
|
rotate = _ref$rotate === void 0 ? 0 : _ref$rotate;
|
|
var imgLeftTop = {
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
var imgRightBottom = {
|
|
x: imgWidth,
|
|
y: imgHeight
|
|
};
|
|
if (rotate % 180 !== 0) {
|
|
//todo:旋转测试
|
|
var diffx = (imgWidth - imgHeight) / 2;
|
|
var diffy = (imgHeight - imgWidth) / 2;
|
|
imgLeftTop = {
|
|
x: imgLeftTop.x + diffx,
|
|
y: imgLeftTop.y + diffy
|
|
};
|
|
imgRightBottom = {
|
|
x: imgRightBottom.x - diffx,
|
|
y: imgRightBottom.y - diffy
|
|
};
|
|
}
|
|
var _viewer$originAxisToC = viewer.originAxisToCanvasAxis({
|
|
x: imgLeftTop.x,
|
|
y: imgLeftTop.y
|
|
}),
|
|
x1 = _viewer$originAxisToC.x,
|
|
y1 = _viewer$originAxisToC.y;
|
|
var _viewer$originAxisToC2 = viewer.originAxisToCanvasAxis({
|
|
x: imgRightBottom.x,
|
|
y: imgRightBottom.y
|
|
}),
|
|
x2 = _viewer$originAxisToC2.x,
|
|
y2 = _viewer$originAxisToC2.y;
|
|
var limitCropBox = {
|
|
left: x1,
|
|
top: y1,
|
|
width: x2 - x1,
|
|
height: y2 - y1
|
|
};
|
|
this.options.cropBoxLimited = limitCropBox;
|
|
this.limitCropBox(true, true);
|
|
|
|
//渲染预览框
|
|
if (this.previewBox) {
|
|
var canvas = this.previewBox;
|
|
var ctx = canvas.getContext('2d');
|
|
var viewerRender = viewer.renderCanvas.bind(viewer);
|
|
viewerRender(ctx);
|
|
}
|
|
},
|
|
onWheel: function onWheel(event) {
|
|
var viewer = this.options.viewer;
|
|
//onwheel
|
|
var onViewerWheelHandler = viewer.onWheel.bind(viewer);
|
|
onViewerWheelHandler(event, this.cropped ? this.cropBoxData : null);
|
|
},
|
|
clearBridge: function clearBridge() {}
|
|
}; |