开发工具与关键技术:Visual Studio 2015 JavaScript
作者:宁佐潮
撰写时间:2019.4.11
最近在做一个小功能,在网页制作图片,然后最后生成一张新的图片,现在是实现动态添加文本,首先,点击页面上的添加文字按钮打开添加文字模态框
其中有文字和背景是要打开layer中的颜色选择器-layui. Colorpicker,所以要先引入,然后再选择ID进行渲染
layui.use(['layer', 'colorpicker'], function () {
var layer = layui.layer;
var colorpicker = layui.colorpicker;//颜色选择器
colorpicker.render({
elem: '#color',//指向容器选择器
format: 'rgb',//颜色显示/输入格式
alpha: true,//是否开启透明度
predefine: true,//预定义颜色是否开启
done: function (color) {
Color = color;
changeWrite(color);
}
});
});
之后便是添加文字的一系列操作,首先打开,清空模态框,在预览区先加上一个p标签,设置其基本样式和ID,给它直接加上移动的方法
//添加文字
function AddWrite() {
$("#Remove").click();//先清空模态框
$("#modalInsertWrite").modal('show');//打开模态框
var Writep = $("#Writep").html();//获取到预览html,然后加上增加的p标签,设定基本样式和ID,然后加上onmousedown,可以移动
Writep += '<p class="text-center" id="yulanwrite' + PIndex + '" "Drag(this);" style="position:absolute;top:10px;left:50px;"></p>';
$("#Writep").html(Writep);
PIndex++;//索引自加1
}
//清空添加文字模态框
$("#Remove").click(function () {
$("#formInsertWrite").resetForm();//清空表单
$("#yulanwrite" + (PIndex - 1)).attr("style", "");//样式清空
$("#yulanwrite" + (PIndex - 1)).text("");//内容清空
});
在文体框中输入内容,选择颜色,根据输入的内容,选择的颜色,在改变了后调用方法
//预览
$("#Preview").click(function myfunction() {
var color = Color;//获取定义好的文字颜色
var background = Background;//获取定义好的背景颜色
changeWrite(color, background);//传递参数,调用changeWrite方法
});
//输入后预览
$("#WriteWidth").change(function () {
$("#Preview").click();//输入内容后模拟预览点击调用changeWrite方法
});
$("#WriteHeight").change(function () {
$("#Preview").click();//输入内容后模拟预览点击调用changeWrite方法
});
$("#Writecontent").change(function () {
$("#Preview").click();//输入内容后模拟预览点击调用changeWrite方法
});
字体颜色和背景颜色方法大致一样
//字体颜色选取后预览
$(".Selectcolor").click(function () {
$("#colorClick").show();//显示颜色选择器
$(".Selectcolor2").attr("id", "color");//赋予文字ID
$(".Selectbackground2").attr("id", "");//去除背景ID
colorpicker.render({
elem: '#color',//指向容器选择器
format: 'rgb',//颜色显示/输入格式
alpha: true,//是否开启透明度
predefine: true,//预定义颜色是否开启
done: function (color) {
Color = color;//给全局文字颜色变量赋值
var color = color;//获取定义好的文字颜色
var background = Background;//获取定义好的背景颜色
changeWrite(color, background);//传递参数,调用changeWrite方法
}});
});
//背景颜色选取后预览
$(".Selectbackground").click(function () {
$("#backClick").show();//显示颜色选择器
$(".Selectcolor2").attr("id", "");//去除文字ID
$(".Selectbackground2").attr("id", "color");//赋予背景ID
colorpicker.render({
elem: '#color',//指向容器选择器
format: 'rgb',//颜色显示/输入格式
alpha: true,//是否开启透明度
predefine: true,//预定义颜色是否开启
done: function (background) {
Background = background;//给全局背景颜色变量赋值
var color = Color;//获取定义好的文字颜色
var background = Background;//获取定义好的背景颜色
changeWrite(color, background);//传递参数,调用changeWrite方法
}});
});
调用的changeWrite方法就是获取到用户输入或选择的颜色
//文字样式
function changeWrite(Color, Background) {
var width = $("#WriteWidth").val();//宽度
var height = $("#WriteHeight").val();//高度
var Writecontent = $("#Writecontent").val();//内容
//改变创建的p标签的样式
$("#yulanwrite" + (PIndex - 1)).attr("style", 'position:absolute;top:290px;left:135px;width:' + width + 'px;height:' + height + 'px;color:' + Color + ';background:' + Background + ';line-height:' + height + 'px;'); //设置样式
$("#yulanwrite" + (PIndex - 1)).text(Writecontent); //设置内容
}
最后保存,移动预览的p标签到指定位置
//保存点击 添加到制作区
$("#saverP").click(function () {
var data = "yulanwrite" + (PIndex - 1);//获取ID
var datahtml = $("#" + data).get(0);//根据ID把整个标签获取到
$("#content").append(datahtml);//移动到要移动的地方
$("#modalInsertWrite").modal('hide');//关闭模态框
});