小程序使用movable-view组件实现编辑头像的功能之后如何将他渲染到canvas？-灵析社区
周舟莫UI设计 使用小程序movable-view组件实现编辑头像的功能，包括放大缩小、拖拽移动的功能。 但是现在渲染到canvas中犯了难，如果单纯是拖动图片，计算x和y就能渲染到canvas。 加了放大缩放功能之后多了个scale，x和y和scale这3个数据该如何配合着计算，我没有一点头绪，恳求各位大神帮帮忙？ 保存头像 // 渲染到canvas const renderItem = () => { console.log(oldX, oldY, oldScale); // shearImage(user.idPhoto?.sourceUrl, realWidth.value, realHeight.value, oldScale, oldX, oldY) debugger } demo在这：[https://developers.weixin.qq.com/s/6Ewr8cmY72LG](https://link.segmentfault.com/?enc=6i8IA0LnQ3jNsYzJ5TXj%2BQ%3D%3D.45fZy79GwJo9TMMdOyXxe5BE1htvxVOCEoE3fVhX5k0a46zTnQth3YTfT%2F05jNiN)
强哥喝假酒const renderItem = () => {
const canvas = wx.createCanvasContext('yourCanvasId');
const img = user.idPhoto?.sourceUrl;
const imgWidth = imgWidth * oldScale; // 考虑缩放后的宽度
const imgHeight = imgHeight * oldScale; // 考虑缩放后的高度
const sx = 0;
const sy = 0;
const sWidth = imgWidth;
const sHeight = imgHeight;
const dx = oldX;
const dy = oldY;
const dWidth = imgWidth;
const dHeight = imgHeight;
canvas.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
canvas.draw();
};