0

我正在使用下面的代码通过绘制图像的垂直切片来绘制图像的圆柱视图：

DrawMug(canvasId, cupImg, rotate, scale) {
      var canvas: any = document.getElementById(canvasId);
      var ctx = canvas.getContext("2d");
    
      var productImg = new Image();
      productImg.onload = () => {
        var iw = productImg.width;
        var ih = productImg.height;
        console.log("height");
    
        canvas.width = iw;
        canvas.height = ih;
    
        ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height, 0, 0, iw, ih);
        this.loadUpperIMage(ctx, rotate, scale);
      };
    
      productImg.src = cupImg;
    }

    loadUpperIMage(ctx: any, rotate: number, scale: number) {
        var img = new Image();
        img.src = this.designImgUrl;
        img.onload = function() {
     
          var iw = img.width;
          var ih = img.height;
    
          var xOffset = 100, //left padding
            yOffset = 110; //top padding
    
          var a = 75.0; //image width
          var b = 12.0; //round ness
    
          var scaleFactor = iw / (scale * a);

          // draw vertical slices (increasing X by 1)
          for (var X = 0; X < iw; X += 1) {
            var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation          
            ctx.drawImage(img, (X * scaleFactor), 0, (iw / rotate), ih, X + xOffset, y + yOffset, 1, 174);
          }
        };
      }

它绘制图像但边缘看起来不太好，如下所示：

在此处输入图像描述

我尝试通过替换for循环来减小垂直切片宽度来解决它，如下所示

// draw vertical slices (increasing X by 0.1)
for (var X = 0; X < iw; X += 0.1) {
   var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation          
   ctx.drawImage(img, (X * scaleFactor), 0, (iw / rotate), ih, X + xOffset, y + yOffset, 0.1, 174);
}

它修复了边缘，但它扭曲了图像，如下所示，可能是因为我在这里将目标宽度设为 0.1，但是我不确定如何相应地设置源宽度。

在此处输入图像描述

小提琴 https://jsfiddle.net/au8f6d51/

4

0 回答 0