Incorporate the paper.js library seamlessly within an Angular.js project

Question

Incorporate the paper.js library seamlessly within an Angular.js project

I'm currently facing an issue with integrating paper.js into angular.js. The main problem I am encountering is determining where to load the paperscript part.

Within my project, I have a view and a controller, but I am unsure of where to place the code. It seems that placing it in the controller doesn't work, and putting it in the view causes it not to load.

This is what my controller looks like:

    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 resource at the moment';
            });
        default:
            console.log(response);
    }
});

Here's how my view is structured:

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

javascript angularjs paperjs

Answer 1

Answer №1

Here is the directive approach for drawing using HTML canvas:

Take a look at the example on jsFiddle

HTML:

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

Directive code:

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

Here is the directive approach for drawing using HTML canvas:

Take a look at the example on jsFiddle

HTML:

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

Directive code:

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 3

Answer №2

If you want to use JavaScript directly instead of loading paperscript, you can do so easily.

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

If you want to use JavaScript directly instead of loading paperscript, you can do so easily.

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

Answer №3

I have encountered issues with the previous solutions provided, as they contain excess code and unnecessary IDs.

Check out my jsFiddle link

For example, let's say I only have a simple element like this:

<canvas draw></canvas>

Here is an uncomplicated directive that could be used with the above element:

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) {
                //no specific actions needed here
            };
        }
    };
});

Answer 6

I have encountered issues with the previous solutions provided, as they contain excess code and unnecessary IDs.

Check out my jsFiddle link

For example, let's say I only have a simple element like this:

<canvas draw></canvas>

Here is an uncomplicated directive that could be used with the above element:

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) {
                //no specific actions needed here
            };
        }
    };
});

Incorporate the paper.js library seamlessly within an Angular.js project

Answer №1

Answer №2

Answer №3

Similar questions

Is there a bug hiding in the Angular code for the Codecademy Calendar App waiting to be found?

if statement based on the conditions set in the CSS

Issues with JQuery and Bootstrap Button not working properly inside a Popover

JavaScript layout: Thymealf

What is the best way to connect methods using variables?

What is the most effective method for updating a className in Next.js using CSS Modules when a button is activated?

AngularJS radio buttons are unable to be selected in a simplistic manner

Using Nested ng-repeat for Values and Keys in Angular

Custom server-side methods in SignalR

Parsing dates using moment.js with strict format and specific locale

Avoiding unlimited re-renders when using useEffect() in React - Tips and Strategies

Building with bricks and mortar does not involve organizing visual content

Attempting to utilize JSON.Stringify on Scripting.Dictionary objects will result in failure

Transforming a canvas into a div element

Use JavaScript to send GET parameters to the server without needing to refresh the page

Utilizing TypeScript generics to accurately extract type information from state during reduction

Showing button based on a particular value

What is the best way to send only one variable from a complex JavaScript file?

Creating a 2D array of multiplication tables using JavaScript

Using node.js to set the billing address while confirming a Stripe Payment intent