在SVG（Fabricjs）上应用光谱颜色
[英]Apply spectrum color on the SVG (Fabricjs)
问题描述
我目前正在尝试使用光谱颜色在svg中存在的所有对象上应用颜色。
首先，我将SVG中对象的所有独特颜色存储在一个数组中，然后显示在基于对象中唯一颜色填充的光谱中。
我想要的是当我使用光谱颜色选择器来改变颜色时改变对象颜色。
我正在使用的SVG在此链接= Tiger SVG，我目前正在此程序中使用
工作演示在这里= JS小提琴演示
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 + ' <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();
}
1 个解决方案
解决方案1
0 2019-06-21 08:23:27
我已经解决了这个问题。我只是调整我的代码，它解决了我的问题。
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小提琴
如何更改画布上的 svg 颜色 - Fabricjs
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.