文件名称:image-morphing
文件大小:3.76MB
文件格式:ZIP
更新时间:2024-08-07 21:00:21
JavaScript
图像变形 目的 创建可以轻松用作 Web UI 的图像变形效果! 变形 EC 网站上模特照片的幻灯片。 实施目标 如果给两个或多个图像对应的点(例如,人脸的位置分别是),它们就会被变形。这可以通过将纹理映射的图像变换和改变透明度的淡入/淡出相结合来实现(我认为)。 纹理映射 这是通过将图像分成多个三角形,通过仿射变换扭曲每个三角形并绘制来实现的。 上面的许多例子都很简单,因为它们使用了以网格模式排列的三角形,但我想在任何一点分割图像(我想用任意坐标的三角形分割它)。 需要从三点变换前后的坐标求出仿射变换矩阵。这是参照。 德劳内 如果要在纹理映射期间从任意点生成要分割的三角形(单击)将使用德劳内图(德劳内三角分割)。 Delaunay图的实现比较复杂(我尽力了也可以自己写,但是很烦人的水平),所以决定用d3.js的方法。 变形滑块.js MorphingSliderJS 是使用 Java
【文件预览】:
image-morphing-master
----.gitignore(48B)
----.brackets.json(578B)
----package.json(822B)
----src()
--------test0.html(370B)
--------sass()
--------test.html(3KB)
--------js()
--------index.html(395B)
--------lib()
--------Procfile(103B)
----.bowerrc(43B)
----gulpfile.js(2KB)
----build()
--------test0.html(370B)
--------test.html(3KB)
--------index2.html(396B)
--------js()
--------css()
--------index.html(395B)
--------lib()
--------img()
----README.md(3KB)
----.idea()
--------react-gulp-sample.iml(369B)
--------misc.xml(599B)
--------libraries()
--------workspace.xml(46KB)
--------vcs.xml(180B)
--------dictionaries()
--------inspectionProfiles()
--------jsLibraryMappings.xml(272B)
--------.name(17B)
--------modules.xml(286B)
----Procfile(103B)
----json()
--------test_get.json(23B)
----bower.json(424B)