Javascript 如何在画布上填充图案并沿形状弯曲?
我有一个像这样的图像,我想用这样的图案填充,使结果像这样 我可以使用下面的代码填充图案,但我不知道如何沿着衣领形状正确地弯曲图案,因为它看起来应该是真实的,但我的结果变成了这样 这是我的示例脚本Javascript 如何在画布上填充图案并沿形状弯曲?,javascript,canvas,html5-canvas,Javascript,Canvas,Html5 Canvas,我有一个像这样的图像,我想用这样的图案填充,使结果像这样 我可以使用下面的代码填充图案,但我不知道如何沿着衣领形状正确地弯曲图案,因为它看起来应该是真实的,但我的结果变成了这样 这是我的示例脚本 $(function(){ drawCanvas("body","collar","images/collar.png", 180); function drawCanvas(overlayType, canvasID, imageSource, degreeRotate){ var canv
$(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);
}
}
}});
有人可以指导我如何管理模式曲线沿边领形状看起来像真的吗 可以对多边形进行三角剖分,然后弯曲网格。然后可以使用图案填充网格。下面是Java中三角剖分的一个示例:。下面是一个三角剖分的示例,以及删除长边的一些工作。它是2d点集的凹面外壳
您可以通过简单地垂直切割和偏移图案来达到这一目的 原始“衣领”图像: 衣领充满弯曲的格子纹理 **方法:*
- 创建一个用棋盘格纹理平铺的图像
- 将该纹理图像绘制到临时画布上
- 获取临时画布的图像数据
- 对于每列像素,用衣领曲线偏移整列
- 二次曲线很好地拟合衣领的曲线,因此我在示例中使用它来确定Y偏移
- 将图像数据放回临时画布上
- (您现在有了一个弯曲的方格图案来应用于衣领图像)
- 在主画布上绘制衣领图像
- Set context.globalCompositeOperation=“source”
- 将纹理从临时画布绘制到主画布上
- (合成模式将仅在衣领而不是背景上绘制纹理)
正文{背景色:象牙色;填充:20px;}
画布{边框:1px纯红;}
$(函数(){
//获取画布引用(画布=衣领,画布1=纹理)
var canvas=document.getElementById(“canvas”);
var ctx=canvas.getContext(“2d”);
var canvas1=document.getElementById(“canvas1”);
var ctx1=canvas1.getContext(“2d”);
//在开始之前预加载纹理和衣领图像
var textureImg,collarImg;
var-imageurl=[];
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");
加载图像();
函数LoadAllImage(回调){
对于(var i=0;i 对于(var y=0;yI甚至不知道如何使用javascript正确地对多边形进行三角剖分。实际上,我必须为定制剪裁制作模拟程序,这是基于网站的,这就是为什么我需要这样做。我不想带来坏消息,但由于您提到的三角剖分将对形状的凸面外壳进行三角剖分,因此它不会有太大的影响se表示这个形状。你提到过这个吗?我尝试使用它,但在第228行的D:\www\delaunay triangle\delaunay.php中出现了类似于零的除法的异常。首先,我没有得到图像,所以,我创建了一个tmp文件夹并放置了两个csv文件,然后在我的tmp文件夹中得到了tri_120.png文件。在异常情况下,我还得到了未定义的变量:z在第507行的D:\www\delaunay triangle\delaunay.php中。可能还有其他例外情况与此相关吗?这只是针对这一个形状,还是针对任意形状?@hobberwickey这是针对任意形状的。你能给我提些建议吗?理论上,我可能理解一些步骤,但有些不清楚。你能帮我找出一些片段@markeI think it's ea吗我想用搅拌器或3d程序。@HariDahal,这是代码和提琴:祝你好运
<!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>