动态添加文本

开发工具与关键技术：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');//关闭模态框
});