第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

fabricjs 中的循環(huán)元素

fabricjs 中的循環(huán)元素

富國(guó)滬深 2023-04-27 10:44:34
我嘗試從畫布上的數(shù)組中繪制各種產(chǎn)品?,F(xiàn)在我在一定程度上成功了。但是如果我想輸出變量“articleNumber”,產(chǎn)品圖片“oImg”會(huì)改變,但文本不會(huì)。此文本可能會(huì)被每張新繪圖覆蓋,最后所有文本都與數(shù)組中的最后一個(gè)相同。它可能與“var text”有關(guān)。你們中的任何人都可以幫助我輕松解決這個(gè)問(wèn)題嗎?我對(duì)這個(gè)主題相對(duì)不熟悉,因此真的不知道要尋找什么。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);});}問(wèn)候,Reden G.
查看完整描述

1 回答

?
30秒到達(dá)戰(zhàn)場(chǎng)

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超6個(gè)贊

有一個(gè)非常簡(jiǎn)單的解決方法可以解決您的問(wèn)題,那就是使用let而不是在您的語(yǔ)句中var聲明。ifor

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

問(wèn)題在于,在對(duì) 的所有回調(diào)中fromURL, 的值i停留在 for 循環(huán)完成時(shí)的最后一個(gè)值。這是因?yàn)楫?dāng)您用 聲明i變量時(shí)var,它的范圍不僅在 for 循環(huán)內(nèi),而且在整個(gè)包含函數(shù)中。因此只有一個(gè)i變量由所有回調(diào)共享,并且由于它們都在循環(huán)完成后運(yùn)行,因此它們會(huì)獲得最后一個(gè)值i。如果您在回調(diào)中放置一個(gè) console.log,您會(huì)發(fā)現(xiàn)情況確實(shí)如此。

let另一方面,當(dāng)您使用 時(shí),i會(huì)為 for 循環(huán)的每次迭代創(chuàng)建一個(gè)新變量。這是因?yàn)?code>let具有塊作用域并且 for 循環(huán)是一個(gè)塊。因此,每個(gè)回調(diào)都有自己唯一且正確的 值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);

? });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>

<canvas id="foo" width="1200" height="1200"></canvas>


查看完整回答
反對(duì) 回復(fù) 2023-04-27
  • 1 回答
  • 0 關(guān)注
  • 186 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)