首頁猿問 fabricjs 中的循環元素

fabricjs 中的循環元素

JavaScript

富國滬深 2023-04-27 10:44:34

我嘗試從畫布上的數組中繪制各種產品。現在我在一定程度上成功了。但是如果我想輸出變量“articleNumber”，產品圖片“oImg”會改變，但文本不會。此文本可能會被每張新繪圖覆蓋，最后所有文本都與數組中的最后一個相同。它可能與“var text”有關。你們中的任何人都可以幫助我輕松解決這個問題嗎？我對這個主題相對不熟悉，因此真的不知道要尋找什么。for (var i = 0; i < allproducts.length; i++) { // Product image var articleNumber = allproducts[i]; fabric.Image.fromURL('img/products/' + articleNumber + '.png', function(oImg) { oImg.scaleToHeight(fullHeight/10) .set('originX', 'center') .set('left', Math.floor(Math.random() * fullWidth)) .set('top', Math.floor(Math.random() * (fullHeight - 200))) // Article Number var text = new fabric.Text(' '+ allproducts[i] + ' ', { left: oImg.left, top: oImg.top + fullHeight/10 + 2, originX: 'center', fontSize: 9, fontFamily: 'Helvetica', textAlign: 'center', backgroundColor: 'white' }); // Grouped Article number and Product Image var product = new fabric.Group([oImg, text], { hasControls: false, }); // Add Product to Canvas canvas.add(product);});}問候，Reden G.

查看完整描述

1 回答

30秒到達戰場

TA貢獻1828條經驗獲得超6個贊

有一個非常簡單的解決方法可以解決您的問題，那就是使用let而不是在您的語句中var聲明。ifor

for?(let?i?=?0;?i?<?allproducts.length;?i++)?{??
??//?...}

問題在于，在對的所有回調中fromURL，的值i停留在 for 循環完成時的最后一個值。這是因為當您用聲明i變量時var，它的范圍不僅在 for 循環內，而且在整個包含函數中。因此只有一個i變量由所有回調共享，并且由于它們都在循環完成后運行，因此它們會獲得最后一個值i。如果您在回調中放置一個 console.log，您會發現情況確實如此。

let另一方面，當您使用時，i會為 for 循環的每次迭代創建一個新變量。這是因為let具有塊作用域并且 for 循環是一個塊。因此，每個回調都有自己唯一且正確的值i。

這是您的代碼的工作版本：

const allproducts = [1, 2, 3, 4];

var canvas = new fabric.Canvas('foo');

for (let i = 0; i < allproducts.length; i++) {

? // Product image

? var articleNumber = allproducts[i];

? const fullHeight = 1000;

? const fullWidth = 500;

? const imageUrl = 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRlkStdmho9qfM4ofmV4lSVRV_MPmrxPu1f1Q&usqp=CAU';

? fabric.Image.fromURL(imageUrl, function(oImg) {

? ? oImg.scaleToHeight(fullHeight / 10)

? ? ? .set('originX', 'center')

? ? ? .set('left', Math.floor(Math.random() * fullWidth))

? ? ? .set('top', Math.floor(Math.random() * (fullHeight - 200)))

? ? // Article Number

? ? var text = new fabric.Text('? ' + allproducts[i] + '? ', {

? ? ? left: oImg.left,

? ? ? top: oImg.top + fullHeight / 10 + 2,

? ? ? originX: 'center',

? ? ? fontSize: 9,

? ? ? fontFamily: 'Helvetica',

? ? ? textAlign: 'center',

? ? ? backgroundColor: 'white'

? ? });

? ? // Grouped Article number and Product Image

? ? var product = new fabric.Group([oImg, text], {

? ? ? hasControls: false,

? ? });

? ? // Add Product to Canvas

? ? canvas.add(product);

? });

}

反對回復 2023-04-27

1 回答
0 關注
187 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

fabricjs 中的循環元素

fabricjs 中的循環元素

1 回答

添加回答