我正在尝试使用 Angular JS 制作 A snap SVG rect

Question

这是我的代码，在更改它的宽度和高度时遇到困难..但它不会用新值更改它的值。我想在运行时间更改矩形的高度和宽度。

 <div ng-app='app'>
    <div ng-controller="ctrlSizing">
        <label id="wid" style="visibility: hidden">Width: <input ng-model="wid" type="number" placeholder="How about 100"></label>
        <label id="hei" style="visibility: hidden">Height: <input ng-model="hei" type="number" placeholder="How about 100"></label>
        <div id="circle">
            <svg id="SVG" visibility="hidden" onclick="cInput()" style="height: 300; width: 300; position:absolute; left: 0px;top: 50px;">

            </svg>
        </div>
    </div>
</div>

var app = angular.module('app', []);

app.controller('ctrlSizing', function($scope) {
    $scope.$watch('wid', function (newVal, oldVal) {
        if (newVal === oldVal) {
            var s = Snap("#SVG");
            $scope.rectangle = s.rect(150, 150, 0, 0);
            //console.log($scope.circle);
        } else {
            $scope.rectangle.animate({w: newVal}, 500);
            //$scope.rectangle.animate({h: newVal}, 500);
        }
    });
});
    app.controller('ctrlSizing', function($scope) {
    $scope.$watch('hei', function (newval, oldval) {
        if (newval === oldval) {
             var s = Snap("#SVG");
             $scope.rectangle = s.rect(150, 150, 70, 50);
             //console.log($scope.circle);
        } else {
                $scope.rectangle.animate({h: newVal}, 500);
            }
    });
});

Answer 1

我想这就是你想要的。

HTML

<div ng-app ng-controller="myctrl">
    <div>width:<input ng-model="width"></div>
    <div>height:<input ng-model="height"></div>
</div>

javascript

function myctrl($scope){

    $scope.width = 100;
    $scope.height = 100;
    var s = Snap();
    var rec = s.rect(0, 0, 100, 100);

    $scope.$watch('width', function(value){
        rec.animate({width: value}, 500, mina.easein);
    });
    $scope.$watch('height', function(value){
        rec.animate({height: value}, 500, mina.easein);
    });

}

jsfiddle is here.

我正在尝试使用 Angular JS 制作 A snap SVG rect

I'm trying to make A snap SVG rect with Angular JS

angularjs

snap.svg