4
我試圖挽救Fabric.js帆布和使用loadFromJson重新裝入。 但我得到錯誤patternSourceCanvas未定義。 我以爲我應該讓它成爲全球所以我刪除了變種。 但是，當我填的是一些其他的新造型與新模式，這種新格局適用於所有具有在畫布上舊模式之前繪製的形狀。 請以動態模式幫助我。負載動態模式
<!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>