将纸张.js集成到棱角分明的.js中

Integrate paper.js into angular.js

本文关键字：js 集成更新时间：2023-09-26

我在将纸张.js集成到角度.js时遇到了这个问题。我的问题是我根本不知道在哪里加载 paperscript 部分。

我

有一个视图和一个控制器，我无法真正将代码放在我所知道的控制器中，如果将其放置在视图中，它将不会加载。

我的控制器如下所示：

    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>

对此的指令方法：

查看 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();
        }
    };
});

不需要加载 paperscript。你可以直接使用javascript

<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>

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

js小提琴

我只有我的元素，假设

<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
            };
        }
    };
});