Rapaeljs line and arrow

Test Rapaeljs line and arrow sets

by ipoly

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div ng-app ng-controller='myCtrl'>
    <div class="row-fluid">
        <select ng-model="arrowType" class='input-small' ng-options='type for type in arrowTypes'></select>
        <select ng-model="arrowWidth" class='input-small' ng-options='width for width in arrowWidthes'></select>
        <select ng-model="arrowLength" class='input-small' ng-options='length for length in arrowLengthes'></select>
        <select ng-model="strokeWidth" class='input-small' ng-options='stWidth for stWidth in strokeWidthes'></select>
        <select ng-model="strokeLinecap" class='input-small' ng-options='stLcap for stLcap in strokeLinecapes'></select>
    </div>
    <div id="canvas" class='thumbnail'></div> 
    <pre>attr={{attr}}</pre>
</div>

JavaScript

function myCtrl($scope) {
    $scope.arrowTypes = ["classic", "block", "open", "oval", "diamond", "none"];
    $scope.arrowWidthes = ["wide", "narrow", "midium"];
    $scope.arrowLengthes = ["long", "short", "midium"];
    $scope.strokeWidthes = [2, 3, 4, 5, 6, 7, 8, 9, 10];
    $scope.strokeLinecapes = ["butt", "square", "round"];
    $scope.strokeLinejoins = ["bevel", "round", "miter"];

    $scope.arrowType = 'classic';
    $scope.arrowWidth = 'wide';
    $scope.arrowLength = 'long';
    $scope.strokeWidth = 6;
    $scope.strokeLinecap = 'butt';
    $scope.strokeLinejoin = "bevel";

    paper = Raphael('canvas', 500, 200);
    path = paper.path('M10,20 t50,50 t200,50');
    $scope.$watch(function ($scope) {
        var attr = {
            'stroke-linecap': $scope.strokeLinecap,
            'stroke-linejoin': $scope.strokeLinejoin,
            'arrow-end': $scope.arrowType + '-' + $scope.arrowWidth + '-' + $scope.arrowLength,
            'stroke-width': $scope.strokeWidth
        }
        $scope.attr = JSON.stringify(attr, null, 4)
        path.attr(attr)
    })
}