在javascript html5中将整个图像包装在圆柱形杯子中 [英] Wrap whole image on cylindrical cup in javascript html5

问题描述

我想将图像包装在圆柱形杯子上。我正在使用html5和Java脚本来实现此解决方案。我从这个链接中得到了一些想法：

我想将剩余的图片包裹在杯子，像剩下的部分和添加一些按钮旋转。

 < canvas id =canvas>< / canvas> 
 
< script> 
 var canvas = document.getElementById（canvas）; 
 var ctx = canvas.getContext（2d）; 
 
 var productImg = new Image（）; 
 productImg.onload = function（）{
 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）; 
 
 // start（）; 
 
 //大纲
 /*ctx.beginPath（）; 
 ctx.moveTo（88，235.734375）; 
 ctx.bezierCurveTo（88，234.734375，204，298，327，234.734375）; 
 ctx.stroke（）; * / 
}; 
 productImg.src =https://d2z4fd79oscvvx.cloudfront.net/0018872_inspirational_teacher_mug.jpeg; 
 
 var img = new Image（）; 
 img.onload = start; 
 img.src =http://blog.foreigners.cz/wp-content/uploads/2015/05/Make-new-friends.jpg; 
 var pointer = 0; 
 
 
函数start（）{
 
 var iw = img.width; 
 var ih = img.height; 
 //canvas.width = iw + 20; 
 //canvas.height = ih + 20; 
 
 var x1 = 125; 
 var y1 = 130; 
 var x2 = 180; 
 var y2 = 190; 
 var x3 = 405; 
 var y3 = 150; 
 
 //计算线方程斜率& b（m，b）
 var unitT = 1 / iw; 
 
 //绘制垂直切片
（var X = 0，t = 0; X  var xTop =（1 -t）*（1-t）* x1 + 2 *（1-t）* t * x2 + t * t * x3; 
 var yTop =（1-t）*（1-t）* y1 + 2 *（1-t）* t * y2 + t * t * y3; 
 ctx.drawImage（img，X + pointer，0，1，ih，xTop，yTop，0.85，ih  -  600）; 
} 
  

如果我在上面的代码中改变了指针值，那么比其余的图片
stretch。

  var pointer = 100; 
  

我想在整个杯子上包装图像并左右旋转。

解决方案

我已经玩了一段时间的plunkr，想出了这个：

你可以和我的朋友一起玩甚至更多使图像更精确地覆盖杯子，但它仍然远离现实，因为这种方法没有考虑到杯子表面的不同闪电特征。

I want to wrap image on cylindrical cup. I am using html5 and Java script for achieve this solution. I got some idea from this link: https://stackoverflow.com/questions/31424117/. But i am not getting solution from this link.

I want to wrap remaining image behind the cup, Like mold the remaining part and add some button for rotation.

<canvas id="canvas"></canvas>

        <script>
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            var productImg = new Image();
            productImg.onload = function () {
                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);

                //start();

                // outline
                /*ctx.beginPath();
                 ctx.moveTo(88, 235.734375);
                 ctx.bezierCurveTo(88, 234.734375, 204, 298, 327, 234.734375);
                 ctx.stroke();*/
            };
            productImg.src = "https://d2z4fd79oscvvx.cloudfront.net/0018872_inspirational_teacher_mug.jpeg";

            var img = new Image();
            img.onload = start;
            img.src = "http://blog.foreigners.cz/wp-content/uploads/2015/05/Make-new-friends.jpg";
            var pointer = 0;        


            function start() {

                var iw = img.width;               
                var ih = img.height;
                //canvas.width = iw + 20;
                //canvas.height = ih + 20;

                var x1 = 125;
                var y1 = 130;
                var x2 = 180;
                var y2 = 190;
                var x3 = 405;
                var y3 = 150;

                // calc line equations slope & b (m,b)
                var unitT = 1 / iw;

                // draw vertical slices
                for (var X = 0, t = 0; X < iw; X++, t += unitT) {
                    var xTop = (1 - t) * (1 - t) * x1 + 2 * (1 - t) * t * x2 + t * t * x3;                   
                    var yTop = (1 - t) * (1 - t) * y1 + 2 * (1 - t) * t * y2 + t * t * y3;
                    ctx.drawImage(img, X + pointer, 0, 1, ih, xTop, yTop, 0.85, ih - 600);
                }

If i change the pointer value in above code, than remaining image stretch.

var pointer = 100 ;

I want to wrap image on whole mug and rotate in left and right.

解决方案

I've played around your plunkr for some time and came up with this: http://plnkr.co/edit/83xAr99FjswWg0GHjDvJ?p=preview

function start() {

    var iw = img.width;
    var ih = img.height;

    var xOffset = 125,
        yOffset = 122;

    var a = 122.0;
    var b = 30.0;

    var scaleFactor = iw / (2*a); //how many times original image is greater compared to our rendering area?

    // draw vertical slices
    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, 6, ih, X + xOffset, y + yOffset, 1, ih - 605 + y/2);
    }
}

I took this ellipsis equation http://www.mathopenref.com/coordgeneralellipse.html and turn it into the form where I can get Y-coordinate from related X-coordinate.

You can play with my plunkr even more to make the image more accurately cover the cup, but it is still far away from reality because this method is not considering different lightning features of the surface of the cup.

这篇关于在javascript html5中将整个图像包装在圆柱形杯子中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！