diff --git a/.gitignore b/.gitignore index 7dd2de6d..ba712539 100644 --- a/.gitignore +++ b/.gitignore @@ -158,6 +158,8 @@ node_modules lib/ build/ +pixman-0.30.0/ +pixman.tar.gz ### Windows template # Windows image file caches diff --git a/examples/main.jsx b/examples/main.jsx index 8c329ee9..2fae672d 100644 --- a/examples/main.jsx +++ b/examples/main.jsx @@ -137,6 +137,7 @@ class SketchFieldDemo extends React.Component { stretched: true, stretchedX: false, stretchedY: false, + centerContained: false, originX: 'left', originY: 'top' }; @@ -259,13 +260,14 @@ class SketchFieldDemo extends React.Component { if (accepted && accepted.length > 0) { let sketch = this._sketch; let reader = new FileReader(); - let {stretched, stretchedX, stretchedY, originX, originY} = this.state; + let {stretched, stretchedX, stretchedY, originX, originY, centerContained} = this.state; reader.addEventListener('load', () => sketch.setBackgroundFromDataUrl(reader.result, { stretched: stretched, stretchedX: stretchedX, stretchedY: stretchedY, originX: originX, - originY: originY + originY: originY, + centerContained: centerContained, }), false); reader.readAsDataURL(accepted[0]); } @@ -435,6 +437,10 @@ class SketchFieldDemo extends React.Component { defaultToggled={this.state.stretchedY} onToggle={(e) => this.setState({stretchedY: !this.state.stretchedY})}/> + this.setState({centerContained: !this.state.centerContained})}/> +
canvas.setBackgroundImage(new fabric.Image(img), () => canvas.renderAll(), options); - img.src = dataUrl; + if (options.centerContained) { + let img = new Image(); + img.onload = () => { + const sizeX = img.width <= img.height ? "auto" : "100%"; + const sizeY = img.width > img.height ? "auto" : "100%"; + this._canvas.style.background = `url(${dataUrl})`; + this._canvas.style.backgroundSize = `${sizeX} ${sizeY}`; + this._canvas.style.backgroundRepeat = "no-repeat"; + this._canvas.style.backgroundPosition = "center"; + }; + img.src = dataUrl; + } + else { + let img = new Image(); + img.onload = () => canvas.setBackgroundImage(new fabric.Image(img), () => canvas.renderAll(), options); + img.src = dataUrl; + } } render() {