动态添加文本

最近在做一个小功能，在网页制作图片，然后最后生成一张新的图片，现在是实现动态添加文本，首先，点击页面上的添加文字按钮打开添加文字模态框

其中有文字和背景是要打开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 + '"
onmousedown="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');//关闭模态框

});

这样我们的动态添加就完成了