本文介绍了使用动态模式从JSON加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试保存Fabric.js画布并使用 loadFromJson 重新加载它。
但是我收到错误patternSourceCanvas没有定义。
我以为我应该把它全局化，所以我删除了var。
但是当我用新图案填充其他一些新形状时，这个新图案将应用于所有先前绘制的在画布上具有旧图案的形状。
请帮助我了解动态模式。
I am trying to save Fabric.js canvas and reload it using loadFromJson.But I am getting error patternSourceCanvas is not defined.I thought I should make it global so I removed var.But when I fill the some other new shape with new pattern, this new pattern is applied to all the previously drawn shapes which have old patterns on the canvas.Kindly help me with dynamic patterns.
<!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>
推荐答案
使用下面的代码将Image源转换为UTFEncode格式化并存储JSON并重新打开它。
查看演示链接：
Use below code for convert the Image source into the UTFEncode format and store that JSON and reopen the same.Check Demo Link:
//override toObject of fabric.Pattern
var toFixed = fabric.util.toFixed;
fabric.Pattern.prototype.toObject = function(propertiesToInclude) {
var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,
source, object;
if (typeof this.source === "function") {
source = String(this.source);
} else if (typeof this.source.src === "string") {
source = this.source.src;
} else if (typeof this.source === "object" && this.source.toDataURL) {
source = this.source.toDataURL();
}
object = {
type: "pattern",
source: source,
repeat: this.repeat,
crossOrigin: this.crossOrigin,
offsetX: toFixed(this.offsetX, NUM_FRACTION_DIGITS),
offsetY: toFixed(this.offsetY, NUM_FRACTION_DIGITS),
patternTransform: this.patternTransform ? this.patternTransform.concat() : null
};
fabric.util.populateWithProperties(this, object, propertiesToInclude);
return object;
};
var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/2/22/Wikimapia_logotype.svg';
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
width: 200,
height: 200,
strokeWidth: 2,
stroke: '#000'
})
canvas.add(rect);
fabric.Image.fromURL(imageUrl, function(img) {
//alert('t' + img);
console.log('img', img);
img.scaleToHeight(200);
var patternSourceCanvas = new fabric.StaticCanvas();
patternSourceCanvas.add(img);
patternSourceCanvas.setDimensions({
width: img.getWidth(),
height: img.getHeight()
});
patternSourceCanvas.renderAll();
var pattern = new fabric.Pattern({
source: patternSourceCanvas.getElement()
});
rect.fill = pattern;
canvas.renderAll();
}, {
crossOrigin: 'annonymous'
});
$('#loadjson').on('click', function() {
var json = canvas.toJSON();
console.log('json', json['objects']);
canvas.clear();
setTimeout(function() {
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
}, 3000)
})canvas{
border:2px solid #000;
}<canvas id="canvas" width="300" height="300"></canvas><br>
<button id="loadjson">loadfromjson </button>
<!-- <script src='https://rawgit.com/kangax/fabric.js/master/dist/fabric.js'></script> -->
<script src='https://www.multicastr.com/imageeditor/assets/js/fabric.unmin.js'></script>
<script src="https://www.multicastr.com/user/js/jquery.min.js"></script>这篇关于使用动态模式从JSON加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！