我正在尝试保存 Fabric.js 画布并使用重新加载它loadFromJson。
但我收到错误：patternSourceCanvas 未定义。
我认为我应该将其设为全局，所以我删除了 var。
但是，当我用新图案填充其他新形状时，这个新图案将应用于画布上所有先前绘制的具有旧图案的形状。
请帮助我设计动态模式。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dynamic patterns | Fabric.js Demos</title>
<!--[if lt IE 9]>
<script src="../lib/excanvas.js"></script>
<![endif]-->
<!-- <script src="base/prism.js"></script> -->
<script src="http://fabricjs.com/lib/fabric.js"></script>
</head>
<body>
<div id="bd-wrapper">
<h2><span>Fabric.js demos</span>Dynamic patterns</h2>
<div>
<p>
<label>Repeat pattern?</label>
<input type="checkbox" id="img-repeat" checked>
</p>
<p>
<label>Pattern image width</label>
<input type="range" min="50" max="1000" value="100" id="img-width">
</p>
<p>
<label>Pattern left offset</label>
<input type="range" min="0" max="500" value="0" id="img-offset-x">
</p>
<p>
<label>Pattern top offset</label>
<input type="range" min="0" max="500" value="0" id="img-offset-y">
</p>
<br>
<p>
<label>Pattern image angle</label>
<input type="range" min="-90" max="90" value="0" id="img-angle">
</p>
<p>
<label>Pattern image padding</label>
<input type="range" min="-50" max="50" value="0" id="img-padding">
</p>
</div>
<div><button id="toJson">TOJSON</button></div>
<div><button id="fromJson">LoadFromJSON</button></div>
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>
<script>
var canvas = new fabric.Canvas('c');
var padding = 0;
fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img) {
img.scaleToWidth(100).set({
originX: 'left',
originY: 'top'
});
var patternSourceCanvas = new fabric.StaticCanvas();
patternSourceCanvas.add(img);
var pattern = new fabric.Pattern({
source: function() {
patternSourceCanvas.setDimensions({
width: img.getWidth() + padding,
height: img.getHeight() + padding
});
return patternSourceCanvas.getElement();
},
repeat: 'repeat'
});
canvas.add(new fabric.Polygon([
{x: 185, y: 0},
{x: 250, y: 100},
{x: 385, y: 170},
{x: 0, y: 245} ], {
left: 220,
top: 200,
angle: -30,
fill: pattern
}));
document.getElementById('img-width').onchange = function() {
img.scaleToWidth(parseInt(this.value, 10));
canvas.renderAll();
};
document.getElementById('img-angle').onchange = function() {
img.setAngle(this.value);
canvas.renderAll();
};
document.getElementById('img-padding').onchange = function() {
padding = parseInt(this.value, 10);
canvas.renderAll();
};
document.getElementById('img-offset-x').onchange = function() {
pattern.offsetX = parseInt(this.value, 10);
canvas.renderAll();
};
document.getElementById('img-offset-y').onchange = function() {
pattern.offsetY = parseInt(this.value, 10);
canvas.renderAll();
};
document.getElementById('img-repeat').onclick = function() {
pattern.repeat = this.checked ? 'repeat' : 'no-repeat';
canvas.renderAll();
};
});
document.getElementById('toJson').onclick = function () {
jsonData = JSON.stringify(canvas);
}
document.getElementById('fromJson').onclick = function () {
canvas.clear();
canvas.loadFromJSON(jsonData);
canvas.renderAll();
}
</script>
</body>
</html>
这可能是有史以来最新的答案，但我想我也可以回答它，因为这是在谷歌上搜索这个问题时的第一个点击，而且我也有这个确切的问题。
问题是源函数被序列化为代码，例如：
"fill":{
"source":"function () {\r\n\t patternSourceCanvas.setDimensions({\r\n\t width: img.getWidth(),\r\n\t height: img.getHeight(),\r\n\t });\r\n\t return patternSourceCanvas.getElement();\r\n\t }",
"repeat":"repeat",
"offsetX":0,
"offsetY":0
},
到目前为止，解决此问题的最佳方法是创建自己的对象来扩展所需的形状，并覆盖 toObject() 和初始化函数。这将允许您保存和加载所需的自定义数据。
大概是这样的：http://jsfiddle.net/Ly9YY/ http://jsfiddle.net/Ly9YY/（该特定代码似乎不起作用）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
