更改所选对象的fabric.js风格（更新）

-1

如果妳看看这个Fiddle 当我点击#uploadImage按钮将其添加图像随机到#html2canvas股利。现在我想的是增加了许多之后要选择一个特定的对象，然后单击#grayscale 按钮更改对象仅与所选区域转灰度。这可能使用fabric.js或者我必须改变loyality？更改所选对象的fabric.js风格（更新）

HTML

<div id="html2canvas"> 
    <canvas id="c"></canvas> 
</div> 
<img src="http://i.imgur.com/tEpBeQV.jpg" height="50" width="50" id="my-img"> 
<button class="deepblue-button" id="uploadImage">Upload</button> 
<button id="grayscale">GrayScale</button>

JavaFabric SCRIPT

var canvas = new fabric.Canvas('c'); 
canvas.setWidth(640); 
canvas.setHeight(480); 

var img = document.getElementById("my-img"); 
var upload = document.getElementById("uploadImage"); 

upload.addEventListener('click',uploadI,false); 

function uploadI() { 
    canvas.add(new fabric.Image(img, { 
     left: Math.floor(Math.random() * 400) + 100, 
     top: Math.floor(Math.random() * 250) + 200, 
     width: 100, 
     height: 100 
    })); 
}

UPDATE

This Fiddle（“未捕获的SecurityError：未能执行“getImageDat 'CanvasRenderingContext2D'：画布被交叉源数据污染了。“大概是因为JSfiddle）做了窍门，但如果我选择多个对象，然后更改grayscale它不会工作。这仅适用于一个和只有一个对象选择，但并不多。因此任何人都有更好的答案？

来源

2014-06-15 user3508453

无法测试，如果它的工作原理[这]（http://jsfiddle.net/kevinvanlierde/447H3/2/）应该做的伎俩，但它给出了一个错误“未捕获的SecurityError：未能执行‘getImageData’上‘CanvasRenderingContext2D’：画布已经跨域数据的污染。”大概是因为JSfiddle？ – Tyblitz

@Tyblitz这仅适用于** **中之一选择，但如果不选择对象的多个。 – user3508453

对不起，我误解你的问题。我以前的小提琴确实只改变了一个物体（选定的活动物体）的颜色。

如果您想要同时对所有对象进行灰度化，可以将它们推入数组中，然后遍历该数组以更改其属性，最后再渲染所有对象。

var allImages = [], 
    greyscale = document.getElementById('grayscale'); 

greyscale.addEventListener('click', function() { 
    var filter = new fabric.Image.filters.Grayscale(); 
    // loop over all indexes in allImages array 
    for (var i = 0; i < allImages.length; i++) { 
     allImages[i].filters.push(filter); 
     allImages[i].applyFilters(canvas.renderAll.bind(canvas)); 
     // NB: don't know if this can be done out of the loop? 
    } 
}, false); 

function uploadI() { 
    var obj = new fabric.Image(img, { 
     left: Math.floor(Math.random() * 400) + 100, 
     top: Math.floor(Math.random() * 250) + 200, 
     width: 100, 
     height: 100 
    }); 
    // now last image added to array is at index allImages[allImages.length-1] 
    allImages.push(obj); 
    // now add it to the canvas 
    canvas.add(allImages[allImages.length-1]); 
}

NB /免责声明：我不是fabric.js的专家，虽然这可能工作，有可能是这样做的更好的方法，如见fabric.Collection，但文件是很难找到所以我希望这有助于。

注：同样是由于的jsfiddle限制

来源

2014-06-16 23:54:54 Tyblitz

更改所选对象的fabric.js风格（更新）

回答

相关问题