javascript - Fabric JS : Why are my shapes are being replaced with images on canvas

标签 javascript html caching canvas fabricjs

我正在尝试使用 fabric js 为学校项目创建一个绘图应用程序,并希望允许用户将他们的绘图保存到我的数据库并重新打开以进行编辑等。我知道其中一些是多余的,但我一直在尝试多种清除 Canvas 的方法,以便为要打开的选定 Canvas 腾出空间。

我的 chrome 缓存被禁用了,我也使用了这行代码:

fabric.Object.prototype.objectCaching = false;

每次上传时,我都会从我的数据库中打开 json 到我的 Canvas 。如果我从数据库中打开一个包含 5 个图像(png 或 svg)的文件并将其打开到我的 Canvas ,然后决定打开一个只有 10 个形状(矩形、圆形等)的不同绘图, Canvas 将打开这 5 个图像之前在 Canvas 上替换了 5 个形状,然后其他 5 个形状也会在那里...?

$.ajax({
        type: "GET",
        url: "canvasLoadByName.php",
        dataType: "json",
        data: {canvas_name: canvas_name},
        success: function (result){

                //alert(canvas_name + " has been selected!"),

                $("#Open").click(function() {
                    //canvas.getActiveGroup().forEachObject(function(o){ canvas.remove(o) }); canvas.discardActiveGroup().renderAll();
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    canvas.clear();
                    canvas.loadFromJSON();
                    canvas.renderAll();
                    canvas.loadFromJSON(result, canvas.renderAll.bind(canvas));
                    fabric.log(result);

最佳答案

出于某种原因是这个按钮:

$("Open").click(function(){} 

这是导致问题的原因。我想要它,所以它不会在立即选择下拉列表时打开,而是他们会在选择他们想要的文件时选择“确定”。无需单击打开它工作正常...... :s

关于javascript - Fabric JS : Why are my shapes are being replaced with images on canvas,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42532474/

相关文章:

javascript - 使用 jQuery 隐藏/显示多个 Div 的最佳实践

javascript - 将 JSON 对象发送到客户端时,响应中未定义值 - Node.js

javascript - 检查流中的对象是否是可观察的

html - 仅在 OS X 中 Angular 背景线性渐变的楼梯效果(锯齿状边缘)

jquery - 滑动 Bootstrap 元素内联

javascript - HTML5 和 CSS3 网络应用程序

html - 顶部和正文 div 标签内的空白

ruby-on-rails - Rails 俄罗斯娃娃缓存和 N+1

iphone - 使用带有 loadHTMLString/loadData 的 UIWebView 会破坏后退和前进按钮,解决方法吗?

android - 在 WebView 中缓存渐进式 Web 应用程序