个人中心
gpt4 book ai didi

javascript - 如何在 Canvas 上填充图案并沿着形状弯曲？

转载 作者：行者123 更新时间：2023-11-29 22:09:32 27 4
gpt4 key购买 nike

我有一张像这样的图片image like this我想用这样的图案填充 like this做出这样的结果 like this .

我可以使用以下代码填充图案，但我不知道如何沿着衣领形状正确地弯曲图案，因为它应该看起来像真的，但我的结果变成了这样。 like this .

这是我的示例脚本

$(function(){
drawCanvas("body","collar","images/collar.png", 180);

function drawCanvas(overlayType, canvasID, imageSource, degreeRotate){
    var canvas=document.getElementById(canvasID);
    var ctx=canvas.getContext("2d");

    var imgBody=new Image();
    var imgPattern=new Image();
    imgPattern.onload=function(){

        imgBody.onload=function(){
            start();
        }

        imgBody.src=imageSource;
    }
    imgPattern.src="images/pattern.png";

    function start(){
        ctx.drawImage(imgBody,0,0);
        if(overlayType=="body"){
            ctx.globalCompositeOperation="source-atop";
            ctx.globalAlpha=.85;

            var pattern = ctx.createPattern(imgPattern, 'repeat');
            ctx.fillStyle = pattern;
            ctx.rect(0, 0, canvas.width, canvas.height);
            ctx.rotate(degreeRotate * Math.PI/180);

            ctx.fill();
            ctx.translate(150,0);

            ctx.globalAlpha=.1;     
            ctx.drawImage(imgBody,150,0);   
        }
    }
}});

有人可以指导我如何管理图案沿着侧领形状弯曲以看起来像真的吗？

最佳答案

您可以通过简单地垂直切片和偏移您的图案来实现这一目标

原始“项圈”图像:

enter image description here

衣领充满曲线格纹纹理

enter image description here

**方法:*

  • 创建一张用方格纹理平铺的图像。
  • 将该纹理图像绘制到临时 Canvas 上。
  • 获取临时 Canvas 的图像数据。
  • 对于每一列像素，将整列偏移您衣领的曲线。
  • 二次曲线非常适合您的衣领曲线，因此我在示例中使用它来确定 Y 偏移量。
  • 将图像数据放回临时 Canvas 上。
  • (您现在有一个弯曲的方格图案可以应用于您的衣领图像)。
  • 在主 Canvas 上绘制衣领图像。
  • 设置 context.globalCompositeOperation=”source-atop”
  • 将临时 Canvas 上的纹理绘制到主 Canvas 上。
  • (合成模式只会在衣领上绘制纹理，而不是背景)

这是代码和 fiddle :http://jsfiddle.net/m1erickson/hdXyk/ 

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    // get canvas references (canvas=collar, canvas1=texture)
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvas1=document.getElementById("canvas1");
    var ctx1=canvas1.getContext("2d");

    // preload the texture and collar images before starting

    var textureImg,collarImg;
    var imageURLs=[];
    var imagesOK=0;
    var imgs=[];
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/checkered.png");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/collar.png");
    loadAllImages();

    function loadAllImages(callback){
        for (var i = 0; i < imageURLs.length; i++) {
            var img = new Image();
            img.crossOrigin="anonymous";
            imgs.push(img);
            img.onload = function(){ 
                imagesOK++; 
                if (imagesOK==imageURLs.length ) {
                      textureImg=imgs[0];
                      collarImg=imgs[1];
                      start();
                }
            }; 
            img.src = imageURLs[i];
        }      
    }


    function start(){

        // set both canvas dimensions
        canvas.width=collarImg.width;
        canvas.height=collarImg.height+5;
        canvas1.width=textureImg.width;
        canvas1.height=textureImg.height;

        // draw the textureImg on canvas1
        ctx1.drawImage(textureImg,0,0,canvas1.width,canvas1.height);

        // curve the texture into a collar shaped curved 
        curveTexture(collarImg.width,collarImg.height);

        // draw the collarImg on canvas
        ctx.drawImage(collarImg,0,0);

        // set compositing to source-atop
        // any new drawing will ONLY fill existing non-transparent pixels
        ctx.globalCompositeOperation="source-atop";

        // draw the curved texture from canvas1 onto the collar of canvas
        // (the existing pixels are the collar, so only the collar is filled)
        ctx.drawImage(canvas1,0,0);



    }

    function curveTexture(w,h){

        // define a quadratic curve that fits the collar bottom
        // These values change if the collar image changes (+5,-32)
        var x0=0;
        var y0=h+5;
        var cx=w/2;
        var cy=h-32;
        var x1=w;
        var y1=h+5;

        // get a,b,c for quadratic equation
        // equation is used to offset columns of texture pixels
        // in the same shape as the collar
        var Q=getQuadraticEquation(x0,y0,cx,cy,x1,y1);

        // get the texture canvas pixel data
        // 2 copies to avoid self-referencing
        var imageData0 = ctx1.getImageData(0,0,w,h);
        var data0 = imageData0.data;
        var imageData1 = ctx1.getImageData(0,0,w,h);
        var data1 = imageData1.data;

        // loop thru each vertical column of pixels
        // Offset the pixel column into the shape of the quad-curve
        for(var y=0; y<h; y++) {
          for(var x=0; x<w; x++) {

              // the pixel to write
              var n=((w*y)+x)*4;
              // the vertical offset amount
              var yy=parseInt(y+h-(Q.a * x*x + Q.b*x + Q.c));
              // the offset pixel to read
              var nn=((w*yy)+x)*4;

              // offset this pixel by the quadCurve Y value (yy)
              data0[n+0]=data1[nn+0];
              data0[n+1]=data1[nn+1];
              data0[n+2]=data1[nn+2];
              data0[n+3]=data1[nn+3];
          }
        }
        ctx1.putImageData(imageData0,0,0);
    }


    // Quadratic Curve: given x coordinate, find y coordinate
    function getQuadraticY(x,Q){
        return(Q.a * x*x + Q.b*x + Q.c);
    }

    // Quadratic Curve: 
    // Given: start,control,end points
    // Find: a,b,c in quadratic equation ( y=a*x*x+b*x+c )
    function getQuadraticEquation(x0,y0,cx,cy,x2,y2){
        // need 1 more point on q-curve, so calc its midpoint XY
        // Note: since T=0.5 therefore TT=(1-T)=0.5 also [so could simplify]
        var T=0.50;
        var TT=1-T;
        var x1=TT*TT*x0+2*TT*T*cx+T*T*x2;
        var y1=TT*TT*y0+2*TT*T*cy+T*T*y2;
        var A = ((y1-y0)*(x0-x2) 
              + (y2-y0)*(x1-x0))/((x0-x2)*(x1*x1-x0*x0) 
              + (x1-x0)*(x2*x2-x0*x0));
        var B = ((y1-y0)-A*(x1*x1-x0*x0))/(x1-x0);
        var C = y0-A*x0*x0-B*x0;
        return({a:A,b:B,c:C});
    }


}); // end $(function(){});
</script>

</head>

<body>
    <p>"Curve" a texture by offsetting Y pixels based on Q-curve</p>
    <canvas id="canvas" width=300 height=300></canvas>
    <p>The temporary texture canvas</p>
    <canvas id="canvas1" width=300 height=300></canvas>
</body>
</html>

关于javascript - 如何在 Canvas 上填充图案并沿着形状弯曲？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18811066/

27 4 0
文章推荐： android - 如何比较 sqlite 数据库中的文本数据值？
文章推荐： android - 在 Windows 中复制一个用于 Eclipse 的 Android 项目
文章推荐： JOINing 时 MySQL COUNT 值发生变化
文章推荐： android - 日志消息在简单的 while(i
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com