AngularJS SVG + KeyEvent
HTML
<div id="app" ng-app="">
<div ng-controller="Ctrl">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="translate({{rect.x}}, {{rect.y}})">
<rect width="{{rect.width}}" height="{{rect.height}}" ng-click="changeSize()"></rect>
<g ng-show="rect.selected">
<rect class="handle" width="10" height="10" transform="translate(-10, -10)"></rect>
<rect class="handle" width="10" height="10" transform="translate({{rect.width / 2 - 5}}, -10)"></rect>
<rect class="handle" width="10" height="10" transform="translate({{rect.width}}, -10)"></rect>
<rect class="handle" width="10" height="10" transform="translate(-10, {{rect.height / 2 - 5}})"></rect>
<rect class="handle" width="10" height="10" transform="translate({{rect.width}}, {{rect.height / 2 - 5}})"></rect>
<rect class="handle" width="10" height="10" transform="translate(-10, {{rect.height}})"></rect>
<rect class="handle" width="10" height="10" transform="translate({{rect.width / 2 - 5}}, {{rect.height}})"></rect>
<rect class="handle" width="10" height="10" transform="translate({{rect.width}}, {{rect.height}})"></rect>
</g>
</g>
</svg>
</div>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <style> rect {
fill: blue;
}
rect.handle {
fill:black;
}
JavaScript
function Ctrl($scope) {
var speed = 10;
$scope.rect = {
width: 50,
height: 50,
x: 20,
y: 20
};
$scope.changeSize = function () {
if ($scope.rect.width == 50) {
$scope.rect.width = 100;
$scope.rect.height = 100;
} else {
$scope.rect.width = 50;
$scope.rect.height = 50;
}
};
$("body").keydown(function (e) {
console.log(e.which);
$scope.$apply(function () {
if (e.which == 39) {
$scope.rect.x += speed;
} else if (e.which == 37) {
$scope.rect.x -= speed;
if ($scope.rect.x < 0) {
$scope.rect.x = 0;
}
} else if (e.which == 38) {
$scope.rect.y -= speed;
if ($scope.rect.y < 0) {
$scope.rect.y = 0;
}
} else if (e.which == 40) {
$scope.rect.y += speed;
}
});
});
}