Question

所以我希望用户可以选择显示在显示区域上的文本颜色。

到目前为止这是我的代码：输入足够长的文字。

＆＃13;

$(function() {

  $(".fig_image").each(function() {
    var figSrc = $(this).data("image-src");
    $(this).css("background-image", "url('" + figSrc + "')");
  }).draggable({
    containment: "#myWidget",
    helper: "clone",
    cursor: "move"
  });



  // Utility Functions
  function addDed(txt) {
    var $close = $("<span>", {
      class: "floating top right ui-icon ui-icon-close",
      title: "Remove Image"
    }).click(function(e) {
      removeItem($(e.target).parent());
    });
    var $dedTxt = $("<div>", {
      id: "ded-" + ($(".text").length + 1),
      class: "placed text"
    }).html(txt).append($close).css({
      position: "absolute",
      top: "20px",
      left: "20px",
      "font-color": $("#dedi_color option:selected").val(),
      "min-width": "1em",
      "min-height": "20px",
      "padding-right": "16px"
    });
    makeDrag($dedTxt);
    makeResize($dedTxt);
    $dedTxt.disableSelection();
    $dedTxt.appendTo($("#disp_card")).fadeIn();
  }


  function makeDrag($item) {
    $item.draggable({
      containment: "#disp_card"
    });
  }

  function makeResize($item) {
    $item.resizable({
      containment: "#disp_card",
      minWidth: 50,
      aspectRatio: !$item.hasClass("text"),
      start: function(e, ui) {
        if ($item.hasClass("text")) {
          $item.css("border", "1px dashed #ccc");
        }
      },
      resize: function(e, ui) {
        if ($item.hasClass("text")) {
          switch (true) {
            case (ui.size.height < 16):
              $item.css("font-size", "11pt");
              break;
          }
        } else {
          $item.css("background-size", ui.size.width + "px " + ui.size.height + "px");
        }
      },
      stop: function(e, ui) {
        if ($item.hasClass("text")) {
          $item.css("border", "0");
        }
      }
    });
  }

  function removeItem($item) {
    console.log("Remove Item: ", $item);
    $item.fadeOut(function() {
      $item.remove();
    });
  }

  function createPreview() {
    $imageContent = [];
    var ctx = $("#preview_image")[0].getContext("2d");
    ctx.clearRect(0, 0, 600, 400);
    var $source = $("#disp_card");
    // Find and draw Text items
    var $text = $source.find(".text");
    var $det = {};
    var img;
    $text.each(function(ind, el) {
      $det.type = "Text";
      $det.top = parseInt($(el).css("top").slice(0, -2));
      $det.left = parseInt($(el).css("left").slice(0, -2));
      $det.width = $(el).width();
      $det.height = $(el).height();
      $det.content = $(el).text();
      $det.font = {};
      $det.font.size = $(el).css("font-size");
      $det.font.family = $(el).css("font-family");
      $det.font.align = $(el).css("text-align");
      $imageContent.push($det);
      console.log("Adding to Image: ", $det);
      ctx.font = $det.font.size + " " + $det.font.family;
      ctx.textAlign = $det.font.align;
      ctx.textBaseline = "top";
      ctx.fillText($det.content, $det.left, $det.top, $det.width);
      $det = {};
    });

    // Find and draw Image items
    var $images = $source.find(".image");
    $det = {};
    $images.each(function(ind, el) {
      var $det = {};
      $det.type = "Image";
      $det.top = parseInt($(el).css("top").slice(0, -2));
      $det.left = parseInt($(el).css("left").slice(0, -2));
      $det.width = $(el).width();
      $det.height = $(el).height();
      $det.src = {};
      $det.src.url = $(el).data("image-source");
      $imageContent.push($det);
      img = new Image();
      img.src = $det.src.url;
      $det.src.width = img.width;
      $det.src.height = img.height;
      $det.ratio = $det.width / img.width;
      $(img).on("load", function() {
        console.log("Adding to Image: ", $det);
        ctx.drawImage(img, $det.left, $det.top, $det.src.width * $det.ratio, $det.src.height * $det.ratio);
        $det = {};
      });
    });
    //console.log($imageContent);
  }

  //Button Action Functions
  $("#add_dedi_text").click(function(e) {
    e.preventDefault();
    $("#dedi_form").submit();
  });
  $("#dedi_form").submit(function(e) {
    // Will catch when Enter / Return is hit in form
    e.preventDefault();
    addDed($("#dedi_text").val());
    $("#dedi_text").val("");
  })
  $("#clear_dedi_text").click(function(e) {
    e.preventDefault();
    $("#dedi_text").val("");
  });

});

＆＃13;

body { background: #fff;}
#myWidget {
  width: 1110px;
  margin: 0 auto; }
#myWidget:after {
  content: "";
  display: table;
  clear: both;  }
#myWidget div.left {
  padding-right: 0;
  margin-right: 0;
  float: left;
  width: 500px; }
#myWidget div.left .ui-widget-content {  margin-bottom: 4px; }
#myWidget div.right {
  float: right;
  width: 606px; }
#myWidget input,
#myWidget select {
  border: 1px solid #ccc;
  height: 25px;
  padding: 2px;
  border-radius: 4px;
  font-size: 1em; }
#myWidget select {  height: 30px;}
#myWidget .button {  padding: 0.2em 0.3em;  margin: 4px 1px;}
#myWidget .button.default {
  font-weight: bold;
  border-color: #9f9f9f;}
#myWidget .ui-widget-header { padding: 0.25em 0;padding-left: 20px; }
#myWidget .right .ui-widget-header {
  padding: 0.25em 0;
  text-align: center;}
#myWidget .ui-widget-content {  padding: 5px;}
#myWidget .disp_temp {
  width: 598px;
  height: 398px;
  border: 1px solid #eee;
  position: relative; }
#myWidget .disp_temp span { position: absolute;}
#myWidget .disp_temp span.top { top: 0;}
#myWidget .disp_temp span.right {right: 0;}
.no-title .ui-dialog-titlebar { display: none;}
.small-title .ui-dialog-titlebar {
  height: 1.25em;
  font-size: 0.75em}
.small-title .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button { padding: 0.125em; }

＆＃13;

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"> </script>


<div id="myWidget" class="ui-widget">
  <div class="left column">
    <div class="ui-widget-header ui-corner-top">
      A. Dedication Text
    </div>
    <div class="ui-widget-content ui-corner-bottom">
      <div class="disp_dedi">
        <form id="dedi_form">
          <input type="text" id="dedi_text" placeholder="Dedication">
          <select id="dedi_color">
            <option>Red</option>
            <option>Orange</option>
            <option>Blue</option>
            <option>Black</option>
             <option>Pink</option>
          </select>
         
          <a href="" id="add_dedi_text" class="button default">Add</a>
          <a href="" id="clear_dedi_text" class="button">Clear</a>
        </form>
      </div>
    </div>
  <div class="right column">
    <div class="ui-widget-header ui-corner-top">
      Edit Design
    </div>
    <div class="ui-widget-content ui-corner-bottom">
      <div id="disp_card" class="disp_temp">
      </div>
    </div>
  </div>
</div>

＆＃13;

我已准备好一组颜色来选择名称。我试过把＆＃34; font-color＆＃34; ，我认为它可以默认，但它没有。

所以，我刚刚在某个地方找到了这个代码，并想在文本中添加更改颜色的功能。我将在此处选择一些示例颜色 - http://www.color-hex.com/

希望有人可以帮助我。谢谢！

Answer 1

仅使用color: #123456设置字体颜色。

"color": $("#dedi_color option:selected").val(), // inside `addDed` function

更改文字颜色

1 个答案: