我们平常用ps中通过变形命令来修改图片的，让其契合到杯子上面，如果我们要用canvas怎样制作呢？
ps 中的示例
我遇到的需求是完成一个杯子的实时效果图预览，就需要实现这种弯曲的效果，先上代码，然后再讲解原理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas"></canvas>
<p>请选择一张图片绘制在杯子上</p>
<input type='file' id='change' />
</body>
<script src='js/jquery-3.1.1.min.js'></script>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = start;
var productImg = new Image();
productImg.onload = function() {
var iw = productImg.width;
var ih = productImg.height;
canvas.width = iw * 2 / 3;
canvas.height = ih * 2 / 3;
ctx.drawImage(productImg, 0, 0, productImg.width * 2 / 3, productImg.height * 2 / 3);
// img.src='/img/test/i.jpg';
};
productImg.src = "img/cola.jpeg";
$(function() {
$('#change').on('change', function(ev) {
// console.log(ev);
var reader = new FileReader();
var file = this.files[0];
// console.log(file)
reader.onload = function(ev) {
//self.imagePress(ev.target.result, self.option.sizeMax, function(dataURL, blob) {
// console.log(ev.target.result);
img.src = ev.target.result
}
reader.readAsDataURL(file);
})
})
function start() {
var iw = img.width;
var ih = img.height;
var xOffset = 190,
yOffset = 212;
var a = 80.0;
var b = 15.0;
var scaleFactor = iw / (2 * a);
for(var X = 0; X < 2 * a; X++) {
var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
for(var Y = 0; Y < 194 + y * 2; Y++) {
var _scaleFactor = ih / (194 + y * 2);
var scaleFactor = iw / (2 * a - Y / 5);
if(Y < X * 10 && Y < -10 * X + 2 * a * 10) { //Y<x*10
ctx.drawImage(img, (X - Y / 10) * scaleFactor , Y * _scaleFactor, 1, 1, X + xOffset, y + yOffset + Y, 1, 1);
}
}
}
//封边，绘制线段遮住毛糙
ctx.beginPath();
ctx.moveTo(xOffset, yOffset);
ctx.lineTo(xOffset + 226 / 10, yOffset + 226);
ctx.strokeStyle = '#fff';
ctx.lineWidth = 3;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(xOffset + 2 * a + 1, yOffset);
ctx.lineTo(xOffset + 2 * a + 1 - 226 / 10, yOffset + 226);
ctx.strokeStyle = '#fff';
ctx.lineWidth = 3;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(xOffset, yOffset + 1);
ctx.bezierCurveTo(xOffset + a / 2 - 10, yOffset + 20, xOffset + a * 3 / 2 + 15, yOffset + 20, xOffset + 2 * a, yOffset + 1);
ctx.strokeStyle = 'rgb(230,230,230)';
ctx.lineWidth = 3;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(xOffset + 226 / 10, yOffset+226-1);
ctx.bezierCurveTo(xOffset + 226 / 10 + a / 2 -5, yOffset+226 + 18, xOffset + 226 / 10 + a * 3 / 2 - 35, yOffset+226 + 18, xOffset + 226 / 10 + a*3/2-3, yOffset+226 -1);
ctx.strokeStyle = '#fff';
ctx.lineWidth = 3;
ctx.stroke();
}
</script>
</html>
如果正常的运行起来那么会得到这样一张图
有了明显的下弧的感觉
要实现这种弧度首先要分两步方法来操作
主要思路就是先绘制出杯子的轮廓，然后将对应位置比例的图片贴上去。先来绘制带有上下半椭圆的形状:
看上图我们可以知道我们只需要把原图按照竖形切割，然后绘制出具有上下半椭圆的形状，把对应位置的图片贴过来就好了，现在来看看如何绘制具有上下半圆的这个形状：
看了上面的椭圆的计算方式，还有下面一个椭圆，下面一个椭圆就稍微简单点，看看它和上面的椭圆有什么关系：
刚才大致了解对于椭圆是如何切割的，现在看看椭圆+斜边是如何切割的，这个相比只是椭圆切割要复杂一点，会同时对垂直进行切割：
现在来看看左右两根线的方程，一个是y=10*x,一个是y=20*a-10*x;
至此我们就完成了全部的图片绘制，此代码的应用场景就是圆柱体，但是遇到特殊的透视关系上，还是不够灵活，如果能直接解析psd中的变形命令，通过替换智能图层的方式实现会更加的灵活
我最近发现了一下能实现这种想法的网站，分享给大家，有兴趣的同学可以试一试
顶一下
(0)
0%
踩一下
(0)
0%
- 相关评论
- 我要评论
-