canvas 实现图片环绕杯子,仿psd中的变形命令,实现图片的扭曲变形
我们平常用ps中通过变形命令来修改图片的,让其契合到杯子上面,如果我们要用canvas怎样制作呢?ps 中的示例
我遇到的需求是完成一个杯子的实时效果图预览,就需要实现这种弯曲的效果,先上代码,然后再讲解原理 `
<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); }; productImg.src = "img/cola.jpeg"; $(function() { $('#change').on('change', function(ev) { var reader = new FileReader(); var file = this.files[0]; reader.onload = function(ev) { self.option.sizeMax, function(dataURL, blob) { 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>复制代码
` 如果正常的运行起来那么会得到这样一张图
有了明显的下弧的感觉
要实现这种弧度首先要分两步方法来操作
主要思路就是先绘制出杯子的轮廓,然后将对应位置比例的图片贴上去。先来绘制带有上下半椭圆的形状:
看上图我们可以知道我们只需要把原图按照竖形切割,然后绘制出具有上下半椭圆的形状,把对应位置的图片贴过来就好了,现在来看看如何绘制具有上下半圆的这个形状:
看了上面的椭圆的计算方式,还有下面一个椭圆,下面一个椭圆就稍微简单点,看看它和上面的椭圆有什么关系:
刚才大致了解对于椭圆是如何切割的,现在看看椭圆+斜边是如何切割的,这个相比只是椭圆切割要复杂一点,会同时对垂直进行切割:
现在来看看左右两根线的方程,一个是y=10x,一个是y=20a-10*x;
至此我们就完成了全部的图片绘制,此代码的应用场景就是圆柱体,但是遇到特殊的透视关系上,还是不够灵活,如果能直接解析psd中的变形命令,通过替换智能图层的方式实现会更加的灵活
我最近发现了一下能实现这种想法的网站,分享给大家,有兴趣的同学可以试一试
# 程序替换PSD智能图层可以实现个性化定制的效果图预览服务,制作好psd模板,直接替换智能图层,操作起来更加灵活
作者:幕艺传奇
链接:https://juejin.cn/post/7045078708910194696
玩站网免费分享SEO网站优化 技术及文章 伪原创工具 https://www.237it.com/