javascript - 小程序使用movable-view组件实现编辑头像的功能之后如何将他渲染到canvas？

Question

使用小程序movable-view组件实现编辑头像的功能，包括放大缩小、拖拽移动的功能。但是现在渲染到canvas中犯了难，如果单纯是拖动图片，计算x和y就能渲染到canvas。加了放大缩放功能之后多了个scale，x和y和scale这3个数据该如何配合着计算，我没有一点头绪，恳求各位大神帮帮忙？

<movable-area scale-area :style="{width: '516rpx', height: `${canvasHeight}rpx`, overflow: 'hidden'}">    <movable-view      @change="imgChange"      @scale="scaleChange"      :scale-value="scaleValue"      :x="moveX"      :y="moveY"      :style="{width: `${imgWidth}px`, height: `${imgHeight}px`}"      :scale-min="0.1"      scale class="max"      direction="all"      >      <image :style="{width: `${imgWidth}px`, height: `${imgHeight}px`, display:block}" :src="user.idPhoto?.sourceUrl" />    </movable-view>  </movable-area><button @click="renderItem">保存头像<button>// 渲染到canvasconst renderItem = () => {  console.log(oldX, oldY, oldScale);  // shearImage(user.idPhoto?.sourceUrl, realWidth.value, realHeight.value, oldScale, oldX, oldY)  debugger}

补充：------------------------------------------------------------------------》

const renderItem = () => {  const canvas = wx.createCanvasContext('renderCanvas');  const img = user.idPhoto?.sourceUrl;  const _imgWidth = imgWidth.value * oldScale; // 考虑缩放后的宽度  const _imgHeight = imgHeight.value * 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();}

编辑画面：

生成之后：

Answer 1

// 假定输出宽高为 258px*332pxconst [width, height] = [258, 332];canvas.drawImage(  img,  -moveX / scale,  -moveY / scale,  width / scale,  height / scale,  0,  0,  width,  height);

Answer 2

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();};