问题描述:

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/

相关阅读:
Top