image-processing - 画布（大约）5px 线——添加斜角效果以使其成为 3D——有什么想法吗？（包括所需最终效果的样本）

Question

我想（例如）在 HTML5 画布上画一条线。然后我想为那条线添加一个图像斜角效果。所以它看起来是 3D 的，就像画布上的一根绳子。有没有人看到可以沿着这条线做某事的图像处理效果？

Answer 1

我认为进行这种绘图的唯一方法是逐步绘制曲线，并在每一步应用垂直于局部切线的纹理。

但是您似乎想要另一个功能：能够根据曲线的部分“扭曲”纹理。这里有很多参数化选项，我无法猜测你将如何存储/插入纹理的扭曲。所以在下面，我只是用 t 来“转动”纹理，这是贝塞尔曲线的参数。

http://jsfiddle.net/gamealchemist/YPKV9/

示例：图像显示了应用于曲线的纹理，并且在同一曲线下方具有与曲线一起转动的相同纹理。

//  ----------------------------------------------
//  Draw bezier curve filled with 
//    with txCv used as perpendicular texture 
//    signature : drawTexturedBezier ( txCv, a, b, c, d, twisted )
//    a,b,c,d are control points, twisted means
//      do we have to twist the curve.
//          Width of the bezier is == to txCv.width/2 
//          when the draw resolution is tx.height (lower = nicer+slower, 3 seems fine )
//  ----------------------------------------------
function drawTexturedBezier() {
    // build onnly once local vars
    var pt = {
        x: 0,
        y: 0
    };
    var tg = {
        x: 0,
        y: 0
    };
    var lastPt = {
        x: 0,
        y: 0
    };
    drawTexturedBezier = function (txCv, a, b, c, d, twisted) {
        var lineHeight = txCv.height;
        var t = 0;
        var incr = 1 / 1000;
        var pointCount = 0;
        pt.x = a.x;
        pt.y = a.y;
        var thisCoordsForT = coordsForT.bind(null, a, b, c, d);
        var thisTgtForT = tangentForT.bind(null, a, b, c, d);
        // scan the bezier curve by increment of lineHeight distance
        //  on the curve.
        do {
            // update last point
            lastPt.x = pt.x;
            lastPt.y = pt.y;
            // seek next point far enough from previous point
            // just compute one point ahead
            //   using average estimate for t of '1 point ahead'
            thisCoordsForT(t + incr, pt);
            var dx = pt.x - lastPt.x;
            dx *= dx;
            var dy = pt.y - lastPt.y;
            dy *= dy;
            // compute distance to previous point
            var dist = Math.sqrt(dx + dy);
            // compute required t increment
            // considering curve is locally linear
            //  0.92 compensates for the error.
            var tIncrement = 0.92 * incr * (lineHeight / dist);
            t += tIncrement;
            // compute point
            thisCoordsForT(t, pt);
            pointCount++;
            // update regular increment with local one 
            incr = 0.2 * incr + 0.8 * tIncrement;
            // compute tangent for current point
            thisTgtForT(t, tg);
            // draw with perpendicular texture
            drawTexturedLine(txCv, pt, tg, t, twisted);
        } while (t < 1);
    };
    return drawTexturedBezier.apply(this, arguments);
}

和

// draws a rect centered on pt, for a curve having tg as local tangent
//     having size of : txCv.width/2 X txCv.height
//      using the txCv horizontal pattern as pattern.
function drawTexturedLine(txCv, pt, tg, t, twisted) {
    var lineWidth = txCv.width / 2;
    var lineHeight = txCv.height;
    context.save();
    context.beginPath();
    context.lineWidth = 2;
    context.translate(pt.x, pt.y);
    context.rotate(Math.PI + Math.atan2(-tg.x, tg.y));
    var twistFactor = 0;
    if (twisted) {
        twistFactor = (2 * t + animating * Date.now() / 2000) % 1;
    }
    context.drawImage(txCv,
    twistFactor * lineWidth, 0, lineWidth, lineHeight, -0.5 * lineWidth, -0.5 * lineHeight, lineWidth, lineHeight);
    context.restore();
}

Answer 2

3 像素宽的线条太细，无法达到不错的斜角效果。

相反，请尝试使用画布的阴影功能为您的线条提供 3d 效果。

示例代码和演示：http: //jsfiddle.net/m1erickson/djvQV/

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(150,50);
ctx.shadowColor="black";
ctx.shadowBlur=5;
ctx.shadowOffsetY=3;
ctx.strokeStyle="blue";
ctx.stroke();