当前位置: 首页 > Web前端 > HTML5

Touchstamp技术方案(多点位置匹配)

时间:2023-04-05 16:44:34 HTML5

stampCodetouchstamp鎶€鏈柟妗堬紙澶氱偣浣嶇疆鍖归厤锛塂emo鐩墠鎺ㄨ崘鍦≒CChrome涓婃祴璇曪紝浜嬩欢鐩戝惉鏄紶鏍囩被闇€姹傚垎鏋愬緢澶氬紑鍙戣€呭ぇ浼?婕敾灞?娓告垙灞曪紝浼氭湁闆嗛偖鐨勭嚎涓嬫帹骞挎椿鍔ㄣ€傚氨鏄湪鍏ュ彛澶勭粰浣犲彂涓€涓狣M琛ㄦ牸锛屼笂闈細鏈変竴浜涚┖浣嶏紝闇€瑕佷綘鍘绘寚瀹氱殑鎽婁綅棰嗗彇鎵撳嵃浠躲€傚埌鎽婁綅瀹屾垚涓€浜涚畝鍗曠殑浠诲姟锛堝姞寰俊鎴栬€呭叧娉ㄥ叕浼楀彿浠€涔堢殑锛変細鏈夊皬濮愬缁欎綘鐩栫珷鎴栬€呯鏀讹紝鏀堕泦鎴栬€呰揪鍒颁竴瀹氭暟閲忓氨鍙互鍏戞崲绀肩墿銆備紶缁熷嵃绔犳柟妗堝湪鎴戠湅鏉ワ紝杩欑浼犵粺鐨勫嵃绔犵鍒版柟寮忓瓨鍦ㄥ緢澶氶棶棰樸€傜敓浜ф垚鏈珮銆傞鍏堬紝闇€瑕佹墦鍗扮焊璐―M浼犲崟鎺ュ彈鐩栫珷锛屽苟涓烘瘡涓睍浣嶅埗浣滀笓鐢ㄥ嵃绔狅紝骞舵湁宸ヤ綔浜哄憳鍊肩彮璐熻矗姝や簨锛堜笉鑳界寮€灞曚綅锛夈€傛晥鐜囧緢浣庯紝鐩栫珷闇€瑕佸緢鐢ㄥ姏鐨勫帇鍦ㄥ钩鏁寸殑妗岄潰涓婏紝鐩栫珷澶锛屽氨闇€瑕佽创鍗版偿浜嗐€傝繖涓€绯诲垪鍔ㄤ綔璐规椂璐瑰姏銆傚湪鐑偣鎯呭喌涓嬶紝寰堝鏄撴帓闃燂紝閫犳垚鐢ㄦ埛娴佸け锛岀敤鎴蜂綋楠屽樊銆備綔涓轰竴涓悆鐡滅兢浼楋紝杩欏紶绾镐笉寰椾笉闅忚韩鎼哄甫銆傝繕寰椾笉鍋滃湴鍙栧嚭鏉ヨ浆鍥炲幓锛屽瓨璧锋潵楹荤儲锛屽鏄撲涪銆傝€屼笖锛屼笂闈㈢殑婀垮ⅷ姘翠細寮勮剰鎴戞柊涔扮殑琛f湇銆備綔涓轰竴鍚嶅墠绔伐绋嬪笀锛屾垜鎯崇煡閬撴槸鍚﹀彲浠ラ€氳繃绉诲姩绔殑浼犳劅鍣ㄦ妧鏈潵浼樺寲杩欎釜杩囩▼銆傛繁鍏ュ垎鏋愯繖涓渶姹傜偣灏辨槸涓€涓绾跨鍒扮殑闂銆傛渶绠€鍗曠殑鏂规硶鏄壂鐮併€傚伐浣滀汉鍛樺彧闇€鎵弿鎮ㄧ殑浜岀淮鐮佽繘琛岃韩浠介獙璇佸嵆鍙€傚畠绠€鍗曟槗琛屻€傚彲浠ラ槻姝㈣绛惧埌锛岀敤鎴蜂笉闇€瑕佸仛澶銆備絾鏄ソ鍍忓皯浜嗙偣浠€涔堬紵杩欏氨鏄华寮忔劅銆傛敹钘忔槸浜虹被鏈€鍘熷鐨勭埍濂姐€傜洊绔犵殑鏂瑰紡铏界劧绻佺悙浣嗗緢鏈変华寮忔劅锛屽嵈璁╂垜浠兂璧蜂簡鐭冲櫒鏃朵唬鏀惰棌鐨勪箰瓒c€傛壂鐮佺畝鍗曪紝绠€鍗曞埌娌℃湁浠讳綍鍙備笌鎰熺殑杩囩▼缁撴潫銆傚彲浠ユ洿濂界帺鍚楋紵鎯宠薄涓€涓嬶紝鎴戞嬁涓浘绔犲湪浣犵殑鎵嬫満涓婄洊绔狅紝灏卞儚鍦ㄧ焊涓婂仛鐨勪竴鏍凤紝H5涓婂嚭鐜颁簡涓€涓姩鎬佸浘绔狅紝鐢氳嚦寮瑰嚭浜嗕竴涓浉鍏崇殑娓告垙瑙掕壊铔嬶紝鎴戣寰楄繖绉嶄綋楠屼笉浠呭寘鎷敹钘忕殑涔愯叮锛屼篃鐪佸幓浜嗗緢澶氶夯鐑﹀拰鎴愭湰銆侶5杩樺彲浠ユ壙杞芥洿澶氱殑浜や簰鏂瑰紡锛岃鐢ㄦ埛鐨勫弬涓庡害鏇撮珮銆傛墍浠ヨ繖浠朵簨杩樻槸鍊煎緱璁ㄨ鐨勩€傞€昏緫鍒嗘瀽杩欎釜H5鐨勫嵃璁拌瘑鍒妧鏈紝璁╂垜鎯宠捣浜嗗睆涓嬫寚绾硅瘑鍒紝浣嗗畠涓嶉渶瑕侀偅涔堥珮鐨勭簿搴︺€傛墍浠ュ鐐硅Е鎺у簲璇ユ槸鍙兘鐨勩€傛ā鎷熺殑澶氱偣瑙︽帶H5鍗扮珷瀹炰綋澶ф鏄竴涓鏂瑰舰锛屼笂闈㈡湁涓€浜涘嚫璧风殑鐐癸紝姣忎釜鍑歌捣鐨勫湴鏂归兘鏄敤瀵肩數姗¤兌鏉愭枡鍒舵垚鐨勶紙绫讳技浜庣數瀹圭瑪锛夛紝杩欐牱褰撳钩鏀惧湪灞忓箷涓婃椂锛屽彲浠ョ粍鎴愬绉嶅舰鐘跺睆骞曚笂銆傝Е鎽哥偣锛屾ā鎷熸墜鎸囧鐐硅Е鎺х殑浜や簰鏂瑰紡銆傝幏鍙栫偣淇℃伅閫氳繃BOM瀵硅薄鐨勮Е鎽镐簨浠讹紝鍙互鍚屾椂鑾峰彇灞忓箷涓婂涓Е鎽哥偣鐨勫潗鏍囦俊鎭紝濡俒[x1,y1],[x2,y2],[x3,y3]]瀵逛簬杩欐牱涓€涓簩缁存暟缁勶紝灏嗘柊閲囬泦鐨勬暟鎹笌鏁版嵁搴撲腑瀛樺偍鐨勫悓鏍煎紡鐨勫浐瀹氭暟鎹繘琛屾瘮杈冿紝寰楀埌瀹冧滑鐨勭浉浼煎害銆傚拷鐣ユ柟鍚戝拰澶у皬銆傚湪缁欑敤鎴风暀涓嬪嵃璁帮紙閲囬泦鏂扮偣淇℃伅锛夌殑杩囩▼涓紝浼氬瓨鍦ㄤ竴瀹氱殑涓嶇‘瀹氭€э紝鍥犱负闇€瑕侀€氳繃鎵嬫満灞忓箷閲囬泦瑙︽懜鐐癸紝涓嶅悓鏈哄瀷鐨勫睆骞曞昂瀵?鍒嗚鲸鐜囦笉鍚屻€傜洊鍚屼竴鏋氬嵃绔犳椂锛屾瘡娆″緱鍒扮殑鍧愭爣鏁板彲鑳戒笉鍚屻€傛瘡娆$洊绔狅紝鐩栫珷鐨勬柟鍚戝拰鎵嬫満鐨勬柟鍚戝彲鑳戒笉涓€鏍枫€傜浉浼煎杈瑰舰鍩轰簬浠ヤ笂鍑犵偣锛屾垜浠绠楃浉浼煎害鐨勭畻娉曟槸蹇界暐鐐圭殑鏁翠綋鏂瑰悜鍜岀粷瀵瑰ぇ灏忋€備篃灏辨槸璇达紝瑕佽瘉鏄庣浉浼兼€ц€屼笉鏄竴鑷存€с€傚鏋滀袱涓叿鏈夌浉鍚岃竟鏁扮殑澶氳竟褰㈢殑瀵瑰簲瑙掔浉绛変笖瀵瑰簲杈规垚姣斾緥锛屽垯杩欎袱涓垨澶氫釜澶氳竟褰㈢О涓虹浉浼煎杈瑰舰銆傝櫧鐒舵垜浠敹闆嗙殑鐐逛笉涓€瀹氳兘缁勬垚鍑稿杈瑰舰锛屼絾鏄彲浠ュ弬鑰冭瘉鏄庣浉浼煎杈瑰舰鐨勬€濊矾銆?瀵规瘮杈圭殑姣斾緥銆傝窛绂诲彲浠ヤ笉鍥哄畾锛屽嵆鐐逛笌鐐逛箣闂寸殑璺濈锛堝嵆澶氳竟褰㈢殑杈癸級鐨勬瘮渚嬫槸鍥哄畾鐨勩€傝竟鐨勬瘮渚嬪亣璁惧浘绔犱笂鍙湁涓変釜鐐癸紝閫氳繃瑙︽懜浜嬩欢閲囬泦鍒扮殑涓変釜瑙︽懜鐐圭粍鎴愪竴涓笁瑙掑舰锛岄€氳繃璺濈璁$畻寰楀埌涓夎褰笁杈笵1銆丏2銆丏3鐨勯暱搴︿袱鐐逛箣闂淬€?/涓ょ偣涔嬮棿鐨勮窛绂籧onstdistance=(x0,y0,x1,y1)=>Math.hypot(x1-x0,y1-y0);濡傛灉瀹屽叏鎸夌収鐩镐技澶氳竟褰㈠畾鐞嗚瘉鏄庯紝闄や簡姣旇緝鍚勫搴旇竟鐨勬瘮鍊煎锛岃繕瑕佽绠椾袱鏉¤竟鐨勫す瑙掞紝澶夯鐑︿簡銆備綘鑳芥敼鍙樹富鎰忓悧锛熷厛姹傚嚭鏈€灏忕殑杈癸紝鍐嶆眰鍑哄叾浠栬竟涓庢渶灏忚竟鐨勬瘮鍊笺€傚崌搴忛噸鎺掑悗鐨勬暟鎹彲浠ヨ繃婊ゆ帀鏂瑰悜鍜屽ぇ灏忕殑鐗瑰緛銆?/鍋囪D1姹傚墿浣欒竟涓庢渶灏忚竟鐨勬渶灏忔瘮鍊糲onstR1=D2/D1constR2=D3/D1constresultFromTouch=[R1,R2].sort()浠庝腑寰楀埌涓€涓暟缁剅esultFromTouch=[R1,R2]鎵嬫満灞忓箷锛屽悓鐞嗘垜浠篃鍙互浠庨獙璇佺敤鐨勫皝鍗扮偣淇℃伅涓緱鍒板悓缁撴瀯resultFromStamp=[Ra,Rb]鐨勬暟鎹€傜悊鎯虫儏鍐典笅锛屽湪鐢ㄦ埛鎵嬫満涓婇噰闆嗙偣鏃讹紝姝eソ寰楀埌瑙︽懜鐐圭殑涓績鐐瑰儚绱犵殑鍧愭爣淇℃伅锛屾墍浠esultFromTouch鍜宺esultFromStamp瀵瑰簲浣嶇疆鐨勫€煎簲璇ユ槸鍏ㄧ瓑鐨勩€備笉杩囧疄浣撳嵃绔犵殑鐐逛笉鏄竴涓儚绱狅紝鑰屾槸涓€涓潰锛岃€屼笖杩欎釜闈笉鑳藉お灏忋€傛墍浠ヨ瀹氫竴涓悎鐞嗙殑鍏樊銆備綑寮︾浉浼煎害鐜板湪鍙樻垚浜嗘瘮杈冧袱涓竴缁存暟缁勶紙鍚戦噺锛夌殑鐩镐技搴︾殑闂銆傛垜鎯宠鐨勬渶缁堢粨鏋滄槸0-100鐨勫垎鏁帮紝0琛ㄧず瀹屽叏涓嶅悓锛?00琛ㄧず瀹屽叏鐩稿悓銆傝繖鏍峰氨鍙互閫氳繃鍒嗘暟璁剧疆瀹瑰繊搴︼紝濡傛灉鍒嗘暟瓒呰繃90鍒嗭紝鍒欏垽瀹氶€氳繃楠岃瘉銆備綑寮︾浉浼煎害鏄敤鍚戦噺绌洪棿涓袱涓悜閲忓す瑙掔殑浣欏鸡鍊兼潵琛¢噺涓や釜涓綋涔嬮棿鐨勫樊寮傛€с€備綑寮﹀€艰秺鎺ヨ繎1锛屽す瑙掕秺鎺ヨ繎0搴︼紝鍗充袱涓悜閲忚秺鐩镐技銆傝繖閲屽埄鐢ㄤ綑寮︾浉鍏虫€х殑璁$畻鍏紡寰楀埌杩欎釜鍖归厤鍒嗘暟asyncfunctioncompute(x,y){x=tf.tensor1d(x);y=tf.tensor1d(y);constp1=tf.sqrt(x.mul(x).sum());constp2=tf.sqrt(y.mul(y).sum());璁﹑12=x.mul(y).sum();璁╁垎鏁?p12.div(p1.mul(p2));鍒嗘暟=((绛夊緟鍒嗘暟.data())[0]-0.9)*10;returnscore}Differencecorrelation(鑷垱)闄や簡鐩存帴鐢╟osinesimilarity锛屽叾瀹炰篃鍙互璇曡瘯鍏朵粬鐨凙pproach鏉ヨ绠梫ectors鐨刢orrelation銆備緥濡傦紝鎴戞渶鍒濈殑绠楁硶涔嬩竴鏄樊寮傜浉鍏炽€傚鏋滄€诲垎鏄?00锛岃繖涓暟缁勭殑姣忎竴浣嶅鎬诲垎鐨勫奖鍝嶅氨鏄€诲垎/鏁扮粍闀垮害锛屽嵆R1鍜孯a鐨勫樊鍊煎鎬诲垎鐨勫奖鍝嶅湪0鍒?0鍒嗕箣闂淬€俛bs.(R1-Ra)涓庤鍒嗘暟鍛堣礋鐩稿叧銆俢onstgap=abs.(R1-Ra)鐨勬瀬绔儏鍐碉紝褰揼ap=0鏃讹紝娌℃湁鍖哄埆寰楀埌50鍒嗭紝褰揼ap=gamMax瀹屽叏涓嶅悓鏃讹紝寰楀埌0鍒嗭紝鏈€鍚庢槸鎬诲垎鏄€氳繃绱姞寰楀埌鐨勩€俢onstpartScope=50*(1-gap/gapMax);閭d箞闂灏辨槸gapMax锛屼篃灏辨槸鎬庝箞姹傛渶澶у€煎憿锛熸垜涓嶇煡閬?馃う鈥嶏笍)銆備絾鏄牴鎹垜鐨勪汉宸ヨ瀵燂紝90%鐨勬儏鍐典笅杩欎釜鍊奸兘鍦?-10涔嬮棿锛屾墍浠ユ殏鏃跺亣璁緂apMax=10銆傚緱鍒扮殑鑼冨洿鏄竴涓彲浠ヨ〃绀轰袱涓悜閲忕浉浼煎害鐨勫€硷紝鍙栧€艰寖鍥翠负0-100銆傛暣涓€濊矾澶ц嚧鐩稿悓锛屼篃璁告湁鏇寸簿宸х殑绠楁硶鍙互瑙e喅鏁翠釜闂锛屾垨鑰呬紭鍖栭儴鍒嗚绠楋紝娆㈣繋璁ㄨ銆傝鏂规硶鎬荤粨浜嗕袱鐐逛箣闂寸殑璺濈constdistance=(x0,y0,x1,y1)=>Math.hypot(x1-x0,y1-y0);鎸囧畾鍧愭爣鑼冨洿鐨勭偣constrandomPosInRange=(min,max)=>Array.from({length:2},()=>Math.floor(Math.random()*(max-min+1))+鍒嗛挓锛夛紱鏁扮粍涓殑鏈€灏忓€糲onstminInArray=(array)=>array.sort((a,b)=>a-b)[0];鍥涜垗浜斿叆鎸囧畾浣峜onstround=(n,decimals=0)=>Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);鍚戦噺浣欏鸡绫讳技寮傛鍑芥暟compute(x,y){x=tf.tensor1d(x);y=tf.tensor1d(y);constp1=tf.sqrt(x.mul(x).sum());constp2=tf.sqrt(y.mul(y).sum());璁﹑12=x.mul(y).sum();璁╁垎鏁?p12.div(p1.mul(p2));鍒嗘暟=((绛夊緟鍒嗘暟.data())[0]-0.9)*10;returnscore}differencerelatedconstapproximateMatchArray2=(arr1,arr2)=>{arr1=arr1.sort();arr2=arr2.sort();璁﹕cope=eval(arr1.map((item,i)=>{constreduce=Math.abs(arr1[i]-arr2[i]);return(100/arr1.length)*(1-reduce/10);}).鍔犲叆('+'));鑼冨洿=鑼冨洿*锛堣寖鍥?锛堣寖鍥?90锛?25锛?05锛夛級锛涜繑鍥炶寖鍥?=100?鑼冨洿锛?}锛涢」鐩湴鍧€https://github.com/browniu/stampCode