Question

将paper.js集成到angular.js中存在这个问题。我的问题是我根本不知道在哪里加载起稿部分。

我有一个视图和一个控制器，我无法将代码放在控制器中以供我知道，如果将它放在视图中，它就不会加载。

我的控制器看起来像这样：

    var hash = window.location.hash.split('/');

$scope.status = 'Loading';
var request = jQuery.ajax(system.server, {
    'url': system.server,
    'headers': {
        'Accept': 'application/json',
        'Request': system.request + '/hcbs/allocations/resident/' + hash[3],
        'Username': system.username,
        'Password': system.password
    }
})
.always(function(response)
{
    signature.constructor();
    switch(response.status)
    {
        case 200:
        case undefined:
            $scope.$apply(function()
            {
                $scope.status = '';
                var res = JSON.parse(response);
                $scope.hcbsAllocations = res.hcbsServiceAllocations;

                $scope.change = function(allocationId)
                {
                    console.log(jQuery('[data='+ allocationId +'][name=startDate]').val());
                    console.log(jQuery('[data='+ allocationId +'][name=endDate]').val());
                }

                $scope.submit = function(allocationId)
                {
                    // Validate dates

                    // Make signature popup
                    $scope.signaturePop = true;
                }
            });
            break;
        case 404:
            console.log('error ' + response.status);
            $scope.$apply(function()
            {
                $scope.status = 'Problems loading ressource at the moment';
            });
        default:
            console.log(response);
    }
});

我的观点如下：

<div id="app-content">
    <div consumer />

    <h1>Consumer</h1>

    <div ng-show="status">
        <div class="notice">
            <p>{{status}}</p>
        </div>
    </div>

    <form name="attendance">
        <table class="hcbs">
            <tr ng-repeat="allocation in hcbsAllocations">
                <td class="first"><h3>{{allocation.type}}</h3></td>
                <td class="middle">
                        <input type="datetime-local" name="startDate" ng-model="startDate" ng-change="change(allocation.id)" data="{{allocation.id}}" placeholder="Choose start date" />

                        <input type="datetime-local" name="endDate" ng-model="endDate" ng-change="change(allocation.id)" data="{{allocation.id}}" placeholder="Choose end date" />
                </td>
                <td class="last">
                    <span class="btn" class="submit" data="{{allocation.id}}" ng-click="submit(allocation.id)"><i class="icon-ok icon-large"></i></span>
                </td>    
            </tr>
        </table>
    </form>
</div>

Answer 1

指令方法：

Check out the jsFiddle

HTML：

<canvas id="canvas" resize draw></canvas>

指令：

app.directive('draw', function () {
    return {
        restrict: 'A',
        link: function postLink(scope, element, attrs) {
            var path;
            var drag = false;

            function mouseUp(event) {
                //Clear Mouse Drag Flag
                drag = false;
            }

            function mouseDrag(event) {
                if (drag) {
                    path.add(new paper.Point(event.layerX, event.layerY));
                    path.smooth();
                }
            }

            function mouseDown(event) {
                //Set  flag to detect mouse drag
                drag = true;
                path = new paper.Path();
                path.strokeColor = 'black';
                path.add(new paper.Point(event.layerX, event.layerY));
            }

            function initPaper() {
                paper.install(window);
                paper.setup('canvas');
            }

            element.on('mousedown', mouseDown).on('mouseup', mouseUp).on('mousemove', mouseDrag);

            initPaper();

        }
    };
});

Answer 2

无需加载稿件。您可以使用javascript directly

<body ng-controller="PaperController">

    <canvas id="canvas" resize ng-mousedown="mouseDown($event)" ng-mousemove="mouseDrag($event)" ng-mouseup="mouseUp()"></canvas>
</body>
<script type="text/javascript">
function PaperController($scope){

    var path;
    var drag = false;

    $scope.mouseUp = function(){
        //Clear Mouse Drag Flag
        drag = false;
    };

    $scope.mouseDrag = function(event){
        if(drag){
            path.add(new paper.Point(event.x, event.y));
            path.smooth();
        }
    };

    $scope.mouseDown = function(event){
        //Set  flag to detect mouse drag
        drag = true;
        path = new paper.Path();
        path.strokeColor = 'black';
        path.add(new paper.Point(event.x, event.y));
    };

    init();
    function init(){
        paper.install(window);
        paper.setup('canvas');          
    }
}

</script>

Answer 3

以前的解决方案对我不起作用，并且它们还有很多冗余代码和ID。

jsFiddle

我只有我的元素，假设

<canvas draw></canvas>

像这样一个简单的指令：

app.directive('draw', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var path;
            paper.setup(element.get(0));
            var tool = new paper.Tool();
            tool.onMouseDown = function (event) {
                path = new paper.Path();
                path.strokeColor = 'black';
            };
            tool.onMouseDrag = function (event) {
                path.add(event.point);
            };
            tool.onMouseUp = function (event) {
                //nothing special here
            };
        }
    };
});

将paper.js集成到angular.js中

3 个答案: