Question

我目前正在尝试通过使用光谱颜色将颜色应用于svg中存在的所有对象。

首先，我将对象的所有唯一颜色存储在数组中的SVG中，然后显示在根据对象中唯一颜色填充的光谱中。

我想要的是在使用光谱颜色选择器更改颜色时更改对象的颜色。

我正在使用的SVG位于此链接= Tiger SVG that i am currently using in this program

工作演示在这里= JS Fiddle Demo

HTML

<html>
  <head>
    <title></title>
    <link rel="stylesheet"   

    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

    <div id="allcolor">

    </div>

    <canvas id="fabricjs-canvas"></canvas>
    <button id="addcolorsvg">Get Color from SVG</button>
    <label for="addsvg">Add SVG</label>
    <input type="file" id="addsvg" value="Add SVG"> 
    </body>

    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
    </script>
    <script 
 src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"> 
 </script>
    <script src="https://cdn.rawgit.com/bgrins/spectrum/master/spectrum.js"> 
 </script>
 <link href="https://cdn.rawgit.com/bgrins/spectrum/master/spectrum.css" 
   rel="stylesheet"/>
    <script type="text/javascript" src="script.js"></script>
    <!--<script type="text/javascript" src="ajax.js"></script>-->
    </html>

CSS

canvas {
  border: 2px solid black;
}

#allcolor {
  background-color: white;
  border: 1px solid black;
  width: 150px;
  float: right;
  margin-right: 20px;
  margin-top: 25px;
  padding: 6px;
  display: none;
}

#preview,
.preview {
  border: 1px solid black;
  width: 30px;
  margin-left: 0px;
  padding: 6px;
}

JavaScript代码

fabric.Object.prototype.objectCaching = false;
fabric.filterBackend = new fabric.Canvas2dFilterBackend();
var canvas = new fabric.Canvas("fabricjs-canvas", {
  width: 300,
  height: 300,
  backgroundColor: "#ffffff"
});
canvas.on({
  'selection:created': function(e) {
    populate();
  },
  'selection:updated': function(e) {
    populate();
  },
  'selection:cleared': function(e) {
    clearObject();
  }
});

$("#addsvg").on("change", function(e) {
  var url = URL.createObjectURL(e.target.files[0]);
  fabric.loadSVGFromURL(url, function(objects, options) {
    var loadedObjects = fabric.util.groupSVGElements(objects, options);
    loadedObjects.set({
      left: 150,
      top: 100

    });
    loadedObjects.scaleToWidth(150);
    loadedObjects.scaleToHeight(150);
    canvas.add(loadedObjects);
    canvas.getActiveObject(canvas.item(0));
    canvas.renderAll();
  });
});
$("#addcolorsvg").click(function() {
  obj = canvas.getActiveObject();
  var abc = [];
  var uniqueColors = [];

  var newdiv = "";
  if (obj.type == "group") {
    objlength = canvas.getActiveObject()._objects["length"];
    for (var i = 0, j = 0; i < objlength; i++) {
      obj = canvas.getActiveObject()._objects[i].fill;
      if (obj != "") {
        if ($.inArray(obj, uniqueColors) == -1) {
          uniqueColors.push(obj);

          newdiv += '<div><div class="preview" id="preview' + j + '"> 
       </div>`<label id="colorlabel' + j + '"  value="Color no"' + j + '" 
      for="change_color">Color = </label>' + j + ' &nbsp;<input type="text" 
       class="change_color" id="change_color' + j + '"></div>';`
          j++;
        }
      }
    }
    $("#allcolor").html(newdiv);
    $(".preview").hide();
    bindSpectrumDivs(uniqueColors.length);
  }
});

function bindSpectrumDivs(totalDivs) {
  obj = canvas.getActiveObject();
  var uniqueColors = [];

  if (obj.type == "group") {
    objlength = canvas.getActiveObject()._objects.length;
    for (var i = 0, j = 0; i < objlength; i++) {
      obj = canvas.getActiveObject()._objects[i].fill;
      if (obj != "") {
        if ($.inArray(obj, uniqueColors) == -1) {
          uniqueColors.push(obj);
          j++;
        }
      }
    }
  }
  for (var i = 0; i < uniqueColors.length; i++) {
    $("#change_color" + i).spectrum({
      showInput: true,
      showPalette: true,
      showSelectionPalette: true,
      maxSelectionSize: 10,
      preferredFormat: "hex",
      color: uniqueColors[i],
      change: function(color) {
        obj = canvas.getActiveObject();

        objlength = canvas.getActiveObject()._objects.length;
        for (var j = 0; j < uniqueColors.length; j++) {
          for (var k = 0; k < objlength; k++) {

            if (obj._objects[k].fill == uniqueColors[j].toLowerCase()) {
              obj._objects[j].fill = color.toHexString();
              canvas.renderAll();
            }

          }

        }
      },
      palette: [
        ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
          "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"
        ],
        ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 
       255, 0)", "rgb(0, 255, 0)",
          "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", 
    "rgb(153, 0, 255)", "rgb(255, 0, 255)"
        ],
        ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", 
      "rgb(255, 242, 204)", "rgb(217, 234, 211)",
          "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", 
   "rgb(217, 210, 233)", "rgb(234, 209, 220)",
          "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", 
 "rgb(255, 229, 153)", "rgb(182, 215, 168)",
          "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", 
 "rgb(180, 167, 214)", "rgb(213, 166, 189)",
          "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", 
 "rgb(255, 217, 102)", "rgb(147, 196, 125)",
          "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", 
"rgb(142, 124, 195)", "rgb(194, 123, 160)",
          "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", 
 "rgb(241, 194, 50)", "rgb(106, 168, 79)",
          "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", 
"rgb(103, 78, 167)", "rgb(166, 77, 121)",
          "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 
  96, 0)", "rgb(39, 78, 19)",
          "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 
   18, 77)", "rgb(76, 17, 48)"
        ]
      ]
    });
  }
  canvas.renderAll();
}

function populate() {
  obj = canvas.getActiveObject();
  if (obj.type == "group") {
    populateSvgProperty();
  }
}
function populateSvgProperty(){
  $("#allcolor").show();
}

function clearObject() {
  $("#fontstyle").hide();
  $("#fontstyle").hide();
}

Answer 1

我已经解决了这个问题。我只需调整代码即可解决我的问题。

for (var j = 0; j < objlength; j++) {
      for (var k = 0; k < uniqueColors.length; k++) {
        var newcol = $("#change_color" + k).val()
        if (newcol != "" && newcol != uniqueColors[k]) {
          if (obj._objects[j].fill == uniqueColors[k]) {
            obj._objects[j].fill = color.toHexString();
            canvas.renderAll();
          }
        }
      }
    }

这是JS小提琴演示JS fiddle

在SVG上应用光谱颜色（Fabricjs）

1 个答案: