中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文介紹如何利用中繼器實(shí)現(xiàn)給圖片打標(biāo)簽的效果，enjoy~

通常來說，有動態(tài)內(nèi)容變化就要用到函數(shù)，有相同的數(shù)據(jù)增添刪改的效果就要用到中繼器，所以這篇文章就講的是利用中繼器實(shí)現(xiàn)給圖片打標(biāo)簽的效果。

一、功能分析

• 鼠標(biāo)點(diǎn)擊哪，標(biāo)簽打在哪——需要用到鼠標(biāo)指針方面的函數(shù)，并結(jié)合中繼器的增添動作（難點(diǎn)）
• 修改編輯標(biāo)簽的內(nèi)容——中繼器編輯功能
• 刪除標(biāo)簽——中繼器刪除功能（難點(diǎn)）

以上幾個功能看似很簡單，其實(shí)很有邏輯難點(diǎn)。

二、元件準(zhǔn)備

背景圖片：bg

中繼器：

tag 設(shè)置如下：

repeater中text存文本內(nèi)容、x存橫坐標(biāo)、y存豎坐標(biāo)、v存可見狀態(tài)（1可見、0不可見）

中繼器內(nèi)部元件：tag_show

局部變量：n? 初始值為1（可以用一個矩形承載這個局部變量）

bg+tag 組合成動態(tài)面板panel

鍵盤：keyboard 初始狀態(tài)“隱藏”（由輸入框 input、確定按鈕 ok、刪除按鈕 del組成）

三、實(shí)現(xiàn)

1. 鼠標(biāo)點(diǎn)擊哪，標(biāo)簽打在哪

（1）在做動作之前先分析以下中繼器的加載規(guī)律

如圖，虛線框是中繼器在縱向排列時默認(rèn)情況下增加行的路徑，而我們要的是黃色、藍(lán)色實(shí)心框的隨意路徑，就是要求得坐標(biāo)（x2、y2）與（x3、y3）的值。

這里需要用到鼠標(biāo)指針方面的函數(shù)Cursor.x、Cursor.y，這兩個值是頁面的絕對坐標(biāo)值。

因?yàn)橹欣^器tag及其行的元件tag_show是居左上，即tag.x=0、tag.y=0，tag_show.x=0、tag_show.y=0，所以得出以下計(jì)算：

x2=Cursor.x-panel.x? ?y2=Cursor.y-panel.y-tag_show.height；

x3=Cursor.x-panel.x? ?y3=Cursor.y-panel.y-tag_show.height*2。

由此得出公式：

N.x=Cursor.x-panel.x? ? ? ? N.y=Cursor.y-panel.y-tag_show.height*(N-1)

可是這個點(diǎn)在左下角，所以

N.x=Cursor.x-panel.x? ? ? ? N.y=Cursor.y-panel.y-tag_show.height*N

（2）添加動作

在動態(tài)面板panel上添加動作，不能直接在背景圖上加動作是因?yàn)闃?biāo)簽多了會遮擋背景圖。

在中繼器tag上添加加載動作：

2. 修改編輯標(biāo)簽的內(nèi)容

在確認(rèn)按鈕上加動作：

注意在最后一步取消所有行標(biāo)記。

3. 刪除標(biāo)簽

我為什么要說刪除功能也是一個難點(diǎn)呢？

因?yàn)榘凑粘Ｒ?guī)刪除功能來做的話，中繼器的行會自動靠攏，導(dǎo)致目標(biāo)行之后的行會位移，也就是說刪除中間一個標(biāo)簽，某些標(biāo)簽的位移會發(fā)生變化，為了解決這個問題，我們就不用刪除，而用／隱藏／來代替此功能。

所以中繼器中的v就存放了該行的可見標(biāo)識，v==1表示可見、v==0表示不可見。

依次在中繼器行元件tag_show、刪除按鈕del、中繼器tag上添加動作如下：

本文由 @灰_白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議。