当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Fabricjs Undo/Redo error "patternSourceCanvas is not defined" with a staticCanvas and pattern

问题描述:

I'm trying to combine a FabricJS Undo/Redo with a fixed background scaleable image. I believe the root of the problem is that patternSourceCanvas is not converting to object form, and is simply writing to the JSON string as the actual code.

Instead, "undo" just deletes the image, and "redo" gives the error "patternSourceCanvas is not defined". Then, the pattern button no longer works.

Here is the JSON string with just a circle:

{"objects":[{"type":"circle","originX":"left","originY":"top","left":82.21,"top":170.4,"width":424.04,"height":424.04,"fill":"#decced","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"radius":212.02183310718564,"startAngle":0,"endAngle":6.283185307179586}],"background":""}

Here is the JSON string with a staticCanvas image inside a rectangle shape:

{"objects":[{"type":"rect","originX":"left","originY":"top","left":100,"top":100,"width":100,"height":100,"fill":{"source":"function () {\n patternSourceCanvas.setDimensions({\n width: img.getWidth() + 0,\n height: img.getHeight() + 0\n });\n return patternSourceCanvas.getElement();\n }","repeat":"repeat","offsetX":0,"offsetY":0},"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0}],"background":""}

The code that generates a fixed background scaleable image:

$('#pattern').click(function() {

var rect = new fabric.Rect({

left: 100,

top: 100,

width: 100,

height: 100

});

canvas.add(rect);

fabric.Image.fromURL("https://css-tricks.com/wp-content/uploads/2015/05/kiwi.svg", 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() + 0,

height: img.getHeight() + 0

});

return patternSourceCanvas.getElement();

},

repeat: 'repeat'

});

rect.set({

fill: pattern

});

canvas.renderAll();

save();

});

rect.on('scaling', function() {

rect.set({

width: rect.width * rect.scaleX,

scaleX: 1,

height: rect.height * rect.scaleY,

scaleY: 1

}); // apply the scale

rect.setCoords(); // called so that the bounding box etc gets updated

save();

});

});

The full JSfiddle:

https://jsfiddle.net/aquapussy/fkeL7kxu/base/

分享给朋友:
您可能感兴趣的文章:
随机阅读: