Canvas with AngularJS

Developer
Kazuki Harada
Size
3,035 Kb
Views
6,072
  1. Canvas with AngularJS Previews
  2. Canvas with AngularJS HTML Codes
  3. Canvas with AngularJS CSS Codes
  4. Canvas with AngularJS JS Codes

How do I make an canvas with angularjs?

What is a canvas with angularjs? How do you make a canvas with angularjs? This script and codes were developed by Kazuki Harada on 09 December 2022, Friday.

Canvas with AngularJS Previews
IQ Test

Canvas with AngularJS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>canvas with AngularJS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html ng-app="app"> <head> <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </script> </head> <body ng-controller="sampleController"> <div class="container"> <div class="row form-group"> <canvas width="800px" height="400px" id="canvas" class="draw-block" drawing="input.imageData" drawing-stroke="#00f0f0" drawing-line-width="1.5"></canvas> </div> <div class="row form-group"> <div class="col-xs-4"> <input type="button" class="form-control btn" value="クリア" ng-click="clearDrawingImage()"> </div> <div class="col-xs-4"> <input type="button" class="form-control btn btn-primary" value="保存" ng-click="saveDrawingImage()"> </div> <div class="col-xs-4"> <input type="button" class="form-control btn btn-primary" value="表示" ng-click="viewImage()"> </div> </div> <div class="row form-group"> <img id="img" class="view-image" style="max-width: 400px; max-height: 200px;" view-image="input.imageData"> </div> </div> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Canvas with AngularJS - Script Codes CSS Codes

.draw-block{ border-bottom: 1px solid rgba(0,0,0,0.3); background-color: #FFF; box-shadow: 0 9px 20px -5px rgba(0,0,0,0.8); margin-left : auto ; margin-right : auto ; display: block;
}
.view-image { border: 1px solid #000; margin-left : auto ; margin-right : auto ; display: block;
}

Canvas with AngularJS - Script Codes JS Codes

var app = angular.module("app", []);
app.controller('sampleController', function ($scope, $log, $compile) {
});
app.directive("viewImage", function(){ return { restrict: "A", link: function(scope, element, attrs){ scope.viewImage = function(){ var img = element[0]; if(scope[attrs.viewImage] != null){ img.src = scope[attrs.viewImage]; } } } };
});
app.directive("drawing", function(){ return { restrict: "A", link: function(scope, element, attrs){ scope[attrs.drawing] = null; var canvas = element[0]; var ctx = canvas.getContext('2d'); ctx.lineCap = "round"; ctx.lineJoin = "round"; if(attrs.drawingStroke && attrs.drawingStroke.length > 1){ ctx.strokeStyle = attrs.drawingStroke; }else{ ctx.strokeStyle = "#000"; } if(attrs.drawingLineWidth && attrs.drawingLineWidth.length > 0){ ctx.lineWidth = parseFloat(attrs.drawingLineWidth); }else{ ctx.lineWidth = 10; } var drawing = false; var lastX; var lastY; scope.saveDrawingImage = function(){ console.log("save..."); var img = canvas.toDataURL('image/jpeg'); var modelName = attrs.drawing; scope[modelName] = img; }; scope.clearDrawingImage = function(){ console.log("clear..."); ctx.clearRect(0, 0, canvas.width, canvas.height); }; element.bind('touchstart', function(event){ init(event); var point = getTTouchPoint(event, element[0]); lastX = point.x; lastY = point.y; ctx.beginPath(); drawing = true; }); element.bind('mousedown', function(event){ lastX = event.offsetX; lastY = event.offsetY; ctx.beginPath(); drawing = true; }); element.bind('touchmove', function(event){ if(drawing){ var point = getTTouchPoint(event, element[0]); currentX = point.x; currentY = point.y; draw(lastX, lastY, currentX, currentY); lastX = currentX; lastY = currentY; } }); element.bind('mousemove', function(event){ if(drawing){ currentX = event.offsetX; currentY = event.offsetY; draw(lastX, lastY, currentX, currentY); lastX = currentX; lastY = currentY; } }); element.bind('touchend', function(event){ drawing = false; }); element.bind('mouseup', function(event){ drawing = false; }); function reset(){ element[0].width = element[0].width; } function init(e){ var event = e.originalEvent; event.preventDefault(); } function getTTouchPoint(e, canvas){	var touch = e.originalEvent.touches[0];	var x = touch.pageX - canvas.offsetLeft; var y = touch.pageY - canvas.offsetTop; return {x: x, y: y}; } function getTouchPoint(event, canvas) { var e = event.originalEvent; var x = e.clientX - canvas.offsetLeft; var y = e.clientY - canvas.offsetTop; return {x: x, y: y}; } function draw(lX, lY, cX, cY){ ctx.moveTo(lX,lY); ctx.lineTo(cX,cY); ctx.stroke(); } } };
});
Canvas with AngularJS - Script Codes
Canvas with AngularJS - Script Codes
Home Page Home
Developer Kazuki Harada
Username kazux
Uploaded December 09, 2022
Rating 3
Size 3,035 Kb
Views 6,072
Do you need developer help for Canvas with AngularJS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kazuki Harada (kazux) Script Codes
Name
Infinite-scroll list
Write string on canvas.
AngularJS Validate Test
Write char on canvas.
Flip switch on angular
Format text at blur
Datepicker
A Pen by Kazuki Harada
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!