基于Angular+GSAP实现的贝塞尔网格投影算法可视化交互

Bezier Mesh Projection，通过贝塞尔网孔投影来在线调整（改变）图片的外形。

angular, math

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 7126
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";
var __extends = (this && this.__extends) || function(d, b) {
    for (var p in b)
        if (b.hasOwnProperty(p)) d[p] = b[p];

function ObservablePoint(callback, scope, x, y) {
            return _super.call(this, callback, scope, x, y) || this;
        }
        return ObservablePoint;
    }(PIXI.ObservablePoint));
    //
    // GRID POINT
    // =========================================================================== 
    var GridPoint = (function(_super) {
        __extends(GridPoint, _super);

function runLoader($rootScope, loader, textures) {
        loader
            .add("gsap", "/assets/coolgirl.jpg")
            .load(function(ldr, resources) {
                _.assign(textures, resources);
                $rootScope.$broadcast(Action.TextureLoaded);
            });
    }

function configureTheme($mdThemingProvider) {
        $mdThemingProvider.theme("default")
            .dark()
            .primaryPalette("light-blue");
    }

function isEven(n) {
        return !(n & 1);
    }

function isOdd(n) {
        return !!(n & 1);
    }

function normalize(value, min, max) {
        return (value - min) / (max - min);
    }

function map(x, a, b, c, d) {
        return c + (d - c) * ((x - a) / (b - a)) || 0;
    }

function lerp(min, max, t) {
        return min + (max - min) * t;
    }
    bootstrap();
})(MeshDemo || (MeshDemo = {}));

编译

CSS

* {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}
main {
    position: relative;
    width: 100vw;
    height: 100vh;
}
#canvas {
    top: 0;
    left: 0;
}
.slider-title {
    font-size: 13px;
    padding: 16px 8px 0;
}
.small-slider {
    padding: 0;
    height: 50px;
}
.switch-control {
    font-size: 13px;
}
#canvas-container {
    background: #111111;
    position: relative;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    overflow: hidden;
}
#canvas-container canvas {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
}
#sidenav {
    max-width: 240px;
    min-width: 240px;
    width: 240px;
    z-index: 10;
    background: #1a1a1a;
    background: #262626;
}
#sidenav-content {
    padding: 18px;
    height: 100vh;
}
pixi-canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #111111;
}
.pixi-canvas {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    background: #111111;
}

HTML

<md-sidenav id="sidenav" class="sidenav md-sidenav-left md-whiteframe-4dp" md-is-locked-open="true" layout="column" md-component-id="left" flex>

<div layout="column" layout-align="center left">
                    <div layout="row">
                        <md-button class="md-raised md-primary md-hue-2" ng-click="vm.animator.boxAnimation()">Box</md-button>
                        <md-button class="md-raised md-primary md-hue-2" ng-click="vm.animator.circleAnimation()">Circle</md-button>
                    </div>
                    <div layout="row">
                        <md-button class="md-raised md-primary md-hue-2" ng-click="vm.animator.pointAnimation()">Point</md-button>
                        <md-button class="md-raised md-primary md-hue-2" ng-click="vm.animator.randomAnimation()">Random</md-button>
                    </div>
                </div>
            </div>

<md-divider></md-divider>

<div layout-padding>
                <md-switch class="switch-control md-primary md-hue-2" ng-model="vm.scene.bezierGrid">
                    Bezier Projection
                </md-switch>
                <md-switch class="switch-control md-primary md-hue-2" ng-model="vm.scene.handlesLocked">
                    Link Handles
                </md-switch>
            </div>

<md-divider></md-divider>

<div layout-padding>
                <div class="slider-title">Grid Size: {{vm.gridSize}}</div>
                <md-slider-container class="small-slider">
                    <md-slider id="grid-slider" class="md-primary md-hue-2" min="1" max="30" ng-model="vm.gridSize" aria-label="grid"></md-slider>
                </md-slider-container>
            </div>
        </md-sidenav>

<md-content id="canvas-container" layout="column" flex></md-content>

</main>
</body>

Bezier Mesh Projection，通过贝塞尔网孔投影来在线调整（改变）图片的外形。

angular, math

编辑器支持Emmet

快捷键

Bezier Mesh Projection，通过贝塞尔网孔投影来在线调整（改变）图片的外形。

angular, math

使用AngularJS实现的数学加减乘除可视化计算器

基于AngularJS实现的价格范围过滤器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：