html5 canvas strokeStyle？ [英] html5 canvas strokeStyle?
问题描述
我试图将图像映射到一个3d网格模拟布料使用strokeStyle和画布，我有图像包括，但它目前作为一个背景图像，而不是像涟漪一样流动的布 ，IE的图像是静态的网格流动。
这里是
代码太长，所以我不想在这里粘贴，但这里在jsfiddle失败时进行备份： https://gist.github.com/simonsarris/5405304
这里是最相关的部分：
！新的超级真棒绘制程序！所以很酷我们跳过命名它draw2！
Constraint.prototype.draw3 = function（otherP2）{
//亲爱的朋友们考虑我们有什么。每个框是由两行，
//底部和最右边的。
//从这些行我们可以推导出topleft和右下角
//从这些点我们可以推导矩形
//从斜角矩形对原始矩形我们可以stretch
//一个图像，使用drawImage的重载好的。
//和我们关闭：
//目标rect有2点：$ b $ b //左上角：Math.min（this.p2.x ，otherP2.x），Math.min（this.p2.y，otherP2.y）
//右下角（this.p1.x，this.p1.y）
// image destination rectangle，由两个点组成的矩形。
var dx = Math.min（this.p1.x，Math.min（this.p2.x，otherP2.x））;
var dy = Math.min（this.p1.y，Math.min（this.p2.y，otherP2.y））;
var dw = Math.abs（this.p1.x - Math.min（this.p2.x，otherP2.x））;
var dh = Math.abs（this.p1.y - Math.min（this.p2.y，otherP2.y））;
// DEBUG：如果没有图像打开这个：
//ctx.strokeStyle ='lime';
//ctx.strokeRect(dx，dy，dw，dh）;
//源矩形2点：$ b $ b //左上角：Math.min（this.p2.sx，otherP2.sx），Math.min（this.p2.sy，otherP2 .sy）
//右下角（this.p1.sx，this.p1.sy）
//这些不需要每次都被计算，
/ /他们从来不改变给定的约束
//只计算它们第一次。我可以这样做，但我懒惰
//和过去的午夜。另请参阅：http://www.youtube.com/watch?v=FwaQxDkpcHY#t=64s
if（this.sx === undefined）{
this.sx = Math.min（this .p1.sx，Math.min（this.p2.sx，otherP2.sx））;
this.sy = Math.min（this.p1.sy，Math.min（this.p2.sy，otherP2.sy））;
this.sw = Math.abs（this.p1.sx - Math.min（this.p2.sx，otherP2.sx））;
this.sh = Math.abs（this.p1.sy - Math.min（this.p2.sy，otherP2.sy））;
}
var sx = this.sx;
var sy = this.sy;
var sw = this.sw;
var sh = this.sh;
// DEBUG：如果没有图像打开：
//ctx.strokeStyle ='red';
//ctx.strokeRect(sx，sy，sw，sh）;
//如果我们有一个源和目标矩形，那么我们可以使用drawImage（img，sx，sy，sw，sh，dx）映射一个图像
// ，dy，dw，dh）
//只有问题，我们不能处理矩形...
//但我们会处理。变换有kooties反正。
ctx.drawImage（img，sx，sy，sw，sh，dx，dy，dw，dh）;
};
I am trying to map an image to a "3d" grid that simulates cloth using strokeStyle and canvas, i have the image included but it is currently acting as a background image and not actually flowing with the "cloth" as is ripples, I.E the image is static as the grid flows. here's the jsfiddle which is self explanatory ( only works in Chrome). any help is much appreciated. here is the javascript that renders the image into the background, How do i stop from rendering as a background image and only make it fill the grid?:
function update() {
var img = new Image();
img.src = 'http://free-textures.got3d.com/architectural/free-stone-wall- textures/images/free-stone-wall-texture-002.jpg';
img.onload = function() {
// create pattern
var ptrn = ctx.createPattern(img, 'repeat');
ctx.clearRect(0, 0, canvas.width, canvas.height);
physics.update();
ctx.strokeStyle = ptrn;
ctx.beginPath();
var i = points.length;
while (i--) points[i].draw();
ctx.stroke();
requestAnimFrame(update);
}
}
Hers's the original codepen I'm working from.
`updated fiddle with image outside function update():
It currently seems to actually fill the cells as well as applying it as a background image. is there any way to stop it becoming a background image and only apply it to fill the grid? I've tried this:
ctx.fillStyle = ptrn;
and removing line 260:
ctx.strokeStyle = ptrn;
but it seems to remove the background image just displaying it as a black grid... thank you again for the patience
Oh my! Great question!
So let's see what we've got. A system that has a bunch of "constraints", which are sets of 2 points. Contraints themselves come in pairs, and they make two lines, forming a ┘ shape (the bottom-right of a box).
If we were to draw every constraint line individually we'd see this:
That's all horizontal red lines and vertical blue lines. Drawing a single one we'd just see that ┘ shape, and each long red line is really hundreds of little lines, the bottom of each ┘ shape, end to end. There are several hundred ┘s here, and together they make it look like a cohesive mesh. The fact that each one is already individual makes this easy for us.
That shape is all we need to determine a sort-of bounding box. And it looks like each Point in a Constraint comes with original values, so we'll save those as sx and sy.
If we know the bounds of the boxes at their new location, and we know the original bounds beecause we've saved all the Point's values for the Contraints, then we should be golden.
Once we have the original bounding box of a Constraint and its current bounding box, why, all we have to do is call drawImage with both boxes: ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
I wrote a new Constraint.prototype.draw routine, It looks like this:
And so on.
There are a few ways you could "patch" the holes, and its really up to you, otherwise you'll have to finagle with transformations.
Have a look at the code. I didn't change much. Look for !!! in the code (my edits) and DEBUG: in the code (debug code in case the image does not load or you wanna see the wireframes).
http://jsfiddle.net/simonsarris/Kuw6P/
The code is long so I don't wanna paste it all here, but here's a backup in case jsfiddle goes down: https://gist.github.com/simonsarris/5405304
And here's the most relevant part:
// !!! new super awesome draw routine! So cool we skipped naming it draw2!
Constraint.prototype.draw3 = function(otherP2) {
// NOW dear friends consider what we have. Each box is made out of two lines,
// the bottom and rightmost ones.
// From these lines we can deduce the topleft and bottom-right points
// From these points we can deduce rectangles
// From the skewed rectangle vs the original rectangle we can "stretch"
// an image, using drawImage's overloaded goodness.
// AND WE'RE OFF:
// destination rect has 2 points:
//top left: Math.min(this.p2.x, otherP2.x), Math.min(this.p2.y, otherP2.y)
//bottom right: (this.p1.x, this.p1.y)
// image destination rectangle, a rect made from the two points
var dx = Math.min(this.p1.x, Math.min(this.p2.x, otherP2.x));
var dy = Math.min(this.p1.y, Math.min(this.p2.y, otherP2.y));
var dw = Math.abs(this.p1.x - Math.min(this.p2.x, otherP2.x));
var dh = Math.abs(this.p1.y - Math.min(this.p2.y, otherP2.y));
// DEBUG: IF THERE IS NO IMAGE TURN THIS ON:
//ctx.strokeStyle = 'lime';
//ctx.strokeRect(dx, dy, dw, dh);
// source rect 2 points:
//top left: Math.min(this.p2.sx, otherP2.sx), Math.min(this.p2.sy, otherP2.sy)
//bottom right: (this.p1.sx, this.p1.sy)
// these do NOT need to be caluclated every time,
// they never change for a given constraint
// calculate them the first time only. I could do this earlier but I'm lazy
// and its past midnight. See also: http://www.youtube.com/watch?v=FwaQxDkpcHY#t=64s
if (this.sx === undefined) {
this.sx = Math.min(this.p1.sx, Math.min(this.p2.sx, otherP2.sx));
this.sy = Math.min(this.p1.sy, Math.min(this.p2.sy, otherP2.sy));
this.sw = Math.abs(this.p1.sx - Math.min(this.p2.sx, otherP2.sx));
this.sh = Math.abs(this.p1.sy - Math.min(this.p2.sy, otherP2.sy));
}
var sx = this.sx;
var sy = this.sy;
var sw = this.sw;
var sh = this.sh;
// DEBUG: IF THERE IS NO IMAGE TURN THIS ON:
//ctx.strokeStyle = 'red';
//ctx.strokeRect(sx, sy, sw, sh);
// IF we have a source and destination rectangle, then we can map an image
// piece using drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)
// Only problem, we're not exactly dealing with rectangles....
// But we'll deal. Transformations have kooties anyways.
ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
};
这篇关于html5 canvas strokeStyle？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
