Component({
mixins: [],
data: {
img_w: 0,
img_h: 0,
ratio: 0,
img_l: 0,
img_t: 0,
oldX: 0,
oldY: 0,
hidden_image_src: ""
},
props: {
onCallBack:function(){},
image_url:""
},
didMount() {
var system = dd.getSystemInfoSync();
var ratio = system.windowWidth / 750;
this.setData({
system: system,
ratio: ratio,
shade_bt_bd: (system.windowHeight / ratio) - 700
})
},
didUpdate() { },
didUnmount() { },
methods: {
draw_image() {
var that = this, dt = that.data;
const ctx = dd.createCanvasContext('cropper_ctx');
ctx.drawImage(that.props.image_url, dt.img_l, dt.img_t, dt.img_w, dt.img_h);
ctx.draw();
this.setData({
hidden_image_src: that.props.image_url
})
},
hidden_image_load(e) {
var that = this, dt = that.data;
const ctx = dd.createCanvasContext('cropper_ctx');
ctx.toTempFilePath({
x: 125 * dt.ratio,
y: 200 * dt.ratio,
width: 500 * dt.ratio,
height: 500 * dt.ratio,
destWidth:140,
destHeight:140,
success(res) {
ctx.clearRect(dt.img_l, dt.img_t, dt.img_w, dt.img_h);
ctx.draw();
that.setData({
hidden_image_src: ""
})
that.props.onCallBack(res)
},
});
},
image_onload(e) {
var system = this.data.system, ratio = this.data.ratio;
var dt = e.detail, h = dt.height, w = dt.width, t, l
if (w > h) {
w = 500 / h * w;
h = 500;
t = 200;
l = 375 - (w / 2)
} else {
h = 500 / w * h;
w = 500;
t = 450 - (h / 2);
l = 125;
}
this.setData({
img_w: w * ratio,
img_h: h * ratio,
img_l: l * ratio,
img_t: t * ratio
})
},
touchStart(e) {
var touches = e.touches;
if (touches.length == 1) {
var x = touches[0].clientX, y = touches[0].clientY
this.setData({
oldX: x,
oldY: y
})
} else if (touches.length == 2) {
var x = touches[0].clientX - touches[1].clientX, y = touches[0].clientY - touches[1].clientY;
this.setData({
od_dist: Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))
})
}
},
touchMove(e) {
var client = e.touches;
if (client.length == 1) {
var x = client[0].clientX, y = client[0].clientY,
l = this.data.img_l, t = this.data.img_t, oldX = this.data.oldX, oldY = this.data.oldY;
this.setData({
img_l: l + (x - oldX),
img_t: t + (y - oldY),
oldX: x,
oldY: y
})
} else if (client.length == 2) {
var x = client[0].clientX - client[1].clientX, y = client[0].clientY - client[1].clientY;
var l = this.data.img_l, t = this.data.img_t, w = this.data.img_w, h = this.data.img_h, od_dist = this.data.od_dist;
var dist = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
var zoom_ratio = (dist - od_dist) / w * 2
var nh = h * (1 + zoom_ratio);
var nw = w * (1 + zoom_ratio);
l = l - ((nw - w) / 2);
t = t - ((nh - h) / 2);
this.setData({
img_w: nw,
img_h: nh,
img_l: l,
img_t: t,
od_dist: dist
})
}
},
touchEnd(e) {
}
},
});
