Question

是否可以在2D图像上添加图像/文本，以便提供真实的视图。例如，如http://www.zazzle.com/make_your_own_iphone_5_case-179092402149274498中所示。

Answer 1

这些视图是正交视图和等轴测视图，它们可以使用画布中的仿射变换进行再现，因为它们也是平行四边形。

首先，您需要为不同的情况制作面具。这些需要以与“照片”中的情况相同的方向绘制。使用实心像素（任何颜色都可以，在后面的步骤中不会显示）你想要自定义图形显示的地方，其他地方的透明像素（抗锯齿像素都很好）。

然后在画布中的阴影中绘制，选择复合模式“source-in”替换非透明像素，最后选择混合模式“multiply”并在顶部绘制案例“photo”以混合阴影和高光。后一步将使图像具有深度的幻觉。

对于等轴测视图，计算倾斜角度（或者如果您不确定图像是否准确，则使用试验和误差 - 这是一个经常棕褐色（60°）的经验法则，即。{{ 1}}），然后执行与上面相同的过程。只记得在绘制自定义图像时只应用变换，必须在不进行变换的情况下绘制蒙版和顶层。

可以使用x轴的缩放生成正交侧视图。根据哪个角度，为表壳侧面添加条纹。

步骤示例

transform(1, 0, Math.tan(60/180*Math.PI), 1, 0, 0)

var img = new Image(),
    cust = new Image(),
    count = 2,
    ctx = document.querySelector("canvas").getContext("2d");
img.onload = cust.onload = comp;
img.src = "http://i.stack.imgur.com/je0Jh.png";
cust.src = "http://i.stack.imgur.com/uRPDt.png";

function comp() {
  if (--count) return;
  
  // draw in mask
  ctx.drawImage(img, 0, 0);
  
  // comp. mode source-in
  ctx.globalCompositeOperation = "source-in";
  
  // draw in custom graphics
  ctx.drawImage(cust, 0, 0, ctx.canvas.width, ctx.canvas.height);

    // blend mode multiply
  ctx.globalCompositeOperation = "multiply";

  // draw in original case multiplied (does not work in IE)
  ctx.drawImage(img, 0, 0);
}

质量在很大程度上取决于面具的质量 - 我在这里制作了一个非常快速的脏版本（你的案例图片也可以作为btw的面具）。

等轴测视图的步骤相同，但偏斜变换除外。 Multiply在IE中不起作用，你可以在这里使用alpha，或者制作一个仅包含阴影等的单独遮罩。

话虽如此：请记住，这不是发送到制作的图像。这只会显示最终结果的表示。使用的是图像，图像位置和大小。然后，这些数据用于构建一个用于制作手机外壳的无掩盖平面打印模板。

提供2d图像自定义以生成真实视图

1 个答案:

步骤示例