Jquery 如何在画布中插入文本，如绘画应用程序？
我想让用户在画布中添加文本，写下他想写的内容，并像在绘画应用程序中添加文本一样拖动和调整大小。 这就是我尝试使用angular脚本所做的…但我不想在输入文本中写入文本，也不想使用输入文本调整其大小并更改字体大小，我想在画布中使用类似方框的内容，并完全像画图应用程序一样在其中写入。我已经解决了如何拖动它，所以我现在只需要在画布内通过鼠标移动和在画布内添加文本来调整它的大小Jquery 如何在画布中插入文本，如绘画应用程序？,jquery,html,css,canvas,Jquery,Html,Css,Canvas,我想让用户在画布中添加文本，写下他想写的内容，并像在绘画应用程序中添加文本一样拖动和调整大小。 这就是我尝试使用angular脚本所做的…但我不想在输入文本中写入文本，也不想使用输入文本调整其大小并更改字体大小，我想在画布中使用类似方框的内容，并完全像画图应用程序一样在其中写入。我已经解决了如何拖动它，所以我现在只需要在画布内通过鼠标移动和在画布内添加文本来调整它的大小 <!DOCTYPE html> <html lang="en"> <head> <m
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meme Maker</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div id="canvas-container" ng-mousedown="mouseDown($event)" ng-
mouseup="mouseUp($event)" ng-mousemove="mouseMove($event)" >
<canvas id="canvas">Your browser doesn't support canvas</canvas>
</div>
<label for="text-content">Text Content</label>
<input type="text" id="textWrite" name="text-content" ng-model="textContent"
ng-change="redraw()" placeholder="Write your Text here">
<label for="fill-color">Fill Color</label>
<input type="color" name="fill-color" ng-model="fillColor" ng-
change="redraw()">
<label for="font-size"></label>
<input type="text" ng-change="redraw()" name="font-size" ng-
model="textFont"
placeholder="Enter Text Size">
</div>
<script src="https://cdnjs.cloudflare.'+
'com/ajax/libs/angular.js/1.7.8/angular.js"></script>
<script>
var app = angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
var mouseDownX = 0;
var mouseDownY = 0;
var mouseDiffX = 0;
var mouseDiffY = 0;
$scope.xTextPos = ($('#canvas').width()/2)-80;
$scope.yTextPos = $('#canvas').height();
$scope.fillColor = '#000000';
$scope.strokeColor = '#000000';
var canvasContainer = document.getElementById('canvas-container');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
$scope.redraw = function () {
ctx.fillStyle = "rgba(0, 0, 0, 0.0)";
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawImage();
if(!$scope.textContent&&!$scope.textFont){
drawText('',26);
}else if(!$scope.textContent&&$scope.textFont){
drawText('',$scope.textFont);
}else if($scope.textContent&&$scope.textFont){
drawText($scope.textContent,$scope.textFont);
}else if($scope.textContent&&!$scope.textFont){
drawText($scope.textContent,26);
}
}
$scope.mouseDown = function ($event) {
mouseDownX = $event.offsetX;
mouseDownY = $event.offsetY;
}
$scope.mouseUp = function ($event) {
$scope.xTextPos += mouseDiffX;
$scope.yTextPos += mouseDiffY;
mouseDownX = 0;
mouseDownY = 0;
mouseDiffX = 0;
mouseDiffY = 0;
}
$scope.mouseMove = function ($event) {
if (mouseDownX != 0 && mouseDownY != 0) {
mouseDiffX = $event.offsetX - mouseDownX;
mouseDiffY = $event.offsetY - mouseDownY;
$scope.redraw();
}
}
function drawText(a,fontSize) {
//textCtx.font = '50px "Droid Sans"';
ctx.font = ""+fontSize+"px Arial";
ctx.textBaseline = 'top';
ctx.fillStyle = $scope.fillColor; // line color
ctx.fillText(a,$scope.xTextPos + mouseDiffX, $scope.yTextPos +
mouseDiffY);
ctx.strokeStyle = $scope.fillColor; // line color
ctx.strokeText(a, $scope.xTextPos + mouseDiffX, $scope.yTextPos +
mouseDiffY);
}
function drawImage() {
//draw background image
var newWidth = img.width / 2;
var newHeight = img.height / 2;
canvasContainer.style.width = newWidth + 'px';
canvasContainer.style.height = newHeight + 'px';
canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(img, 0, 0, newWidth, newHeight);
//draw a transparent box over the top
//ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
//ctx.fillRect(0, 0, 500, 500);
}
//drawing of the test image - img1
img.onload = function () {
drawImage();
};
var imageUrl = 'http://r.ddmcdn.com/s_f/o_1/cx_'
+'633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-'+
'doggone-it-video-playlist.jpg';
img.src = imageUrl;
WebFontConfig = {
google: {
//families: ['Droid Sans', 'Droid Serif']
//families: ['Droid Sans']
families: ['Yatra One']
},
loading: function () { },
active: function () { },
inactive: function () { },
fontloading: function (familyName, fvd) { },
fontactive: function (familyName, fvd) {
drawText('',26);
},
fontinactive: function (familyName, fvd) { }
};
(function (d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'webfont.js';
s.parentNode.insertBefore(wf, s);
})(document);
});
</script>
</body>
</html>
模因制造者
您的浏览器不支持画布
文本内容
填充颜色
var app=angular.module（'myApp'，[]）
.controller（'myCtrl'，函数（$scope）{
var mouseDownX=0；
var mouseDownY=0；
var mouseDiffX=0；
var mouseDiffY=0；
$scope.xTextPos=（$（'#canvas'）.width（）/2）-80；
$scope.yTextPos=$（“#画布”）.height（）；
$scope.fillColor='000000'；
$scope.strokeColor='#000000'；
var canvascanner=document.getElementById（'canvas-container'）；
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var img=新图像（）；
$scope.redraw=函数（）{
ctx.fillStyle=“rgba（0,0,0,0.0）”；
clearRect（0，0，canvas.width，canvas.height）；
drawImage（）；
if（！$scope.textContent&！$scope.textFont）{
drawText（''，26）；
}else if（！$scope.textContent&&$scope.textFont）{
drawText（“”，$scope.textFont）；
}else if（$scope.textContent&&$scope.textFont）{
drawText（$scope.textContent，$scope.textFont）；
}else if（$scope.textContent&！$scope.textFont）{
drawText（$scope.textContent，26）；
}
}
$scope.mouseDown=函数（$event）{
mouseDownX=$event.offsetX；
mouseDownY=$event.offsetY；
}
$scope.mouseUp=函数（$event）{
$scope.xTextPos+=mouseDiffX；
$scope.yTextPos+=mouseDiffY；
mouseDownX=0；
mouseDownY=0；
mouseDiffX=0；
mouseDiffY=0；
}
$scope.mouseMove=函数（$event）{
if（mouseDownX！=0&&mouseDownY！=0）{
mouseDiffX=$event.offsetX-mouseDownX；
mouseDiffY=$event.offsetY-mouseDownY；
$scope.redraw（）；
}
}
函数drawText（a、fontSize）{
//textCtx.font='50px“Droid Sans'；
ctx.font=“”+fontSize+“px Arial”；
ctx.textb基线='top'；
ctx.fillStyle=$scope.fillColor；//线条颜色
ctx.fillText（a，$scope.xTextPos+mouseDiffX，$scope.yTextPos+
老鼠）；
ctx.strokeStyle=$scope.fillColor；//线条颜色
ctx.strokeText（a，$scope.xTextPos+mouseDiffX，$scope.yTextPos+
老鼠）；
}
函数drawImage（）{
//绘制背景图像
var newWidth=img.width/2；
var newHeight=img.height/2；
canvasContainer.style.width=newWidth+'px'；
canvasContainer.style.height=newHeight+'px'；
canvas.width=newWidth；
canvas.height=新高度；
ctx.drawImage（img，0，0，newWidth，newHeight）；
//在顶部绘制一个透明框
//ctx.fillStyle=“rgba（200,0,0,0.5）”；
//ctx.fillRect（0,0500500）；
}
//测试图像的绘制-img1
img.onload=函数（）{
drawImage（）；
};
var imageUrl=http://r.ddmcdn.com/s_f/o_1/cx_'
+“633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/太可爱了”+
“doggone it video playlist.jpg”；
img.src=imageUrl；
WebFontConfig={
谷歌：{
//系列：['Droid Sans'，'Droid Serif']
//家庭：['Droid Sans']
家庭：[“雅特拉一号”]
},
正在加载：函数（）{}，
活动：函数（）{}，
非活动：函数（）{}，
fontloading:函数（familyName，fvd）{}，
fontactive:函数（familyName，fvd）{
drawText（''，26）；
},
fontinactive:函数（familyName，fvd）{}
};
（职能（d）{
var wf=d.createElement（'script'），s=d.scripts[0]；
wf.src='webfont.js'；
s、 parentNode.insertBefore（wf，s）；
})（文件）；
});