Question

loadFromJson接受3个参数，第3个参数是应用于每个加载对象的函数。如何将clipTo函数应用于每个加载的图像？

我试过这个：

devServer: {
    quiet: false,
    stats: {colors: true},
    proxy: {// proxy URLs to backend development server
        '/': {
            target: 'http://my.site.it',
            secure: false,
            "protocol": 'http:',
            "port": 80
        },
        ignorePath: true,
        changeOrigin: true,
        secure: false
    },
    overlay: {
        warnings: true,
        errors: true
    },
    disableHostCheck: true,
    contentBase: path.join(__dirname, '../../../../../../../httpdocs'), // boolean | string | array, static file location        
    //port: 3000,
    hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
    https: false, // true for self-signed, object for cert authority
    open: true,
    //useLocalIp: true,
    noInfo: false // only errors & warns on hot reload
}

不幸的是，它引发了一个关于this.canvas.loadFromJSON(this.getJson(), () => { fabric.Image.fromURL(url.replace(/^https:\/\//i, 'http://').concat('?').concat(Math.random().toString(36).substring(7)), (img) => { img.scaleToWidth(this.canvas.getWidth() - 4) this.canvas.add(img) img.sendToBack() this.canvas.renderAll() var image = document.getElementById(this.props.product._id+this.props.type+"-productPreviewImage") image.src = this.canvas.toDataURL() }, { crossOrigin: 'anonymous', objectCaching: false }); }, (img) => { if (img.type == 'image') { img.clipTo = (ctx) => { img.setCoords(); var clipRect = this.canvas.getObjects().filter(p => p.clipFor === 'layer')[0] var scaleXTo1 = (1 / img.scaleX); var scaleYTo1 = (1 / img.scaleY); ctx.save(); var ctxLeft = -(img.width / 2) + 1; var ctxTop = -(img.height / 2) + 1; var ctxWidth = clipRect.width - clipRect.strokeWidth; var ctxHeight = clipRect.height - clipRect.strokeWidth; ctx.translate(ctxLeft, ctxTop); ctx.scale(scaleXTo1, scaleYTo1); ctx.rotate((img.angle * -1)* (Math.PI / 180)) ctx.beginPath(); ctx.rect( clipRect.left - img.oCoords.tl.x, clipRect.top - img.oCoords.tl.y, clipRect.width, clipRect.height ); ctx.closePath(); ctx.restore() } } })不是函数的错误。

Answer 1

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
  // `o` = json object
  // `object` = fabric.Object instance
  // ... do some stuff ...
});

如文档loadFromJSON中所述，reviver函数有两个参数。第一个是来自json的当前对象，第二个是结构对象实例。所以你需要使用第二个参数。

fabricjs在LoadfromJson之后应用clipTo

1 个答案: