主頁 > 前端設計 > 由點定義的兩條任意線之間的中線(即-賽道的中線)。

由點定義的兩條任意線之間的中線(即-賽道的中線)。

2021-10-17 11:47:46 前端設計

假設我有兩個閉合的環路,在二維x、y空間中代表一個賽道的邊界。每個環路的起點如果用一條線連接,將代表起點/終點線,這條線的中點將代表賽道的中心線。

從起跑線向外移動,每個回圈都由線段組成,這些線段的長度是隨機的,變化相對較小。每個環路的線段數量較多,約為20-40K。

考慮到這一點,我試圖解決的問題是找到一個代表其他兩個回圈的中線的封閉回圈(即--軌道的中心線)。

由兩個相對于行進方向被稱為'左'和'右'的環路組成的賽道示例

起初我認為,鑒于每條小線段的長度相對接近,我可以采取一個長度為一段的步驟,該步驟是兩個環路中較小的一段,這個較短的長度被用來通知沿長線段的一個點,然后在兩個長度相等的步驟之間找到一個中點。沿著每條線的新位置被更新,并且這個程序重復進行,有效地在具有較短步驟的活動回圈之間來回切換。

我正在 python 中進行這項作業,我有一個包含兩個回圈的 X 和 Y 位置(x = *.PositionX 和 y = *.PositionZ)的 csv 檔案。以下是我試圖使用的內容,供參考

import traceback
import pandas as pd
import numpy as np
from matplotlib import pyplot as plt    

fDict = {"Bernese Alps":{"fName":"2021-09-12202910_FM7_DASH""left"4,"right":6},
         "Maple Valley":{"fName":"2021-08-30171416_FM7_DASH", "left": 4,"right":1},}

track = "Maple Valley"。

df = pd.read_csv(fDict[track]["fName"/span>] ".csv")

#對應于賽道左右極限的圈數。
lapRight = fDict[track]["right"]
lapLeft = fDict[track]["left"]

#Position from history for right and left>
rightPos = df.loc[df.LapNumber==lapRight,['PositionX','PositionZ']]
leftPos = df.loc[df.LapNumber==lapLeft,['PositionX','PositionZ']]

#Vector difference from one position to the next both right and left]。
rightDiff = rightPos.diff()
rightDiff.iloc[0] = rightPos.iloc[0] -rightPos.iloc[-1]
leftDiff = leftPos.diff()
leftDiff.iloc[0] = leftPos.iloc[0]-leftPos.iloc[-1]

#Vector difference magnitudes one position to the next both right and left[/span
rightDiffMag = (rightDiff.PositionX.copy()*0 np.linalg.norm(rightDiff,axis=1)。 rename({'PositionX':'PositionMag'})
leftDiffMag = (leftDiff.PositionX.copy()*0 np.linalg.norm(leftDiff,axis=1) 。) rename({'PositionX':'PositionMag'})

#Normalized vectors to project to
rightDiffNormed = rightDiff.div(rightDiffMag,'index')
leftDiffNormed = leftDiff.div(leftDiffMag,'index')

#Methods to find center point尋找中心點的方法
#(原本使用x和y的平均值,但為了確認我沒有做錯而改變)def right_to_left(rightX, rightZ, leftX, leftZ)。
    rtl_diff = np.array([leftX-rightX,leftZ-rightZ])
    rtl_mag = np.sqrt(sum(rtl_diff**2)
    rtl_dir = rtl_diff/rtl_mag
    return rtl_dir,rtl_mag

def midPoint(rightX,rightZ, leftX, leftZ)。
    rtl_dir, rtl_mag = right_to_left(rightX,rightZ,leftX,leftZ)
    mid_vec = rtl_dir*rtl_mag*.5return rightX mid_vec[0], rightZ mid_vec[1]

#創建新的右、左和中線容器。
rights = [[rightPos.iloc[0].values[0]], [rightPos.iloc[0].values[1] ]
lefts = [[leftPos.iloc[0].values[0]], [leftPos.iloc[0].values[1] ]]
midP = midPoint(rights[0][0],rights[1][0] 。 lefts[0][0],lefts[1][0] )
mids = [[midP[0]],[midP[1] ]

#Initialize which size is longer].

#Initialize partial remainders from prior step
partials = {'left':0.0'right':0.0}。
#Initialize indicie tracking for each side。
indicies = {'left':1,'right':1}。

print(len(leftPos),len(rightPos))
key = input("PAUSED - 'Y' TO CONTINUE 'N' TO ABORT: ")
if key.lower() == 'y':
    Done = False: 完成 = False.
    try:
        while not Done。
            rightIdx = rightPos.index[indicies['right']]
            leftIdx = leftPos.index[indicies['left']]

            #向前推演一個點。
            rightIdx_fwd = rightPos. index[0] if indicies['right'] > =len(rightPos)-1 else rightPos. index[indicies['right'] 1]
            leftIdx_fwd = rightPos. index[0] if indicies['left']> =len(leftPos)-1 else leftPos。 index[indicies['left'/span>] 1]



            #If remaining left side is longer]。
            if leftDiffMag.loc[leftIdx]-partials['left'/span>] >= rightDiffMag.loc[rightIdx]-partials['right'/span>] 。
                active_side = 'left'#Step magnitude is full right step。
                mag = rightDiffMag.loc[rightIdx]-partials['right']
                if not mag partials['left'] >= leftDiffMag.loc[leftIdx_fwd] 。
                    partials['left'] = mag
                else:
                    partials['left']=0.0。
                    indicies['left'] =1。

                引數['right']=0.0
                indicies['right'] =1
            else:
                #Step magnitude is full right step。
                active_side = 'right''left']

                if not mag partials['right'] >= rightDiffMag.loc[rightIdx_fwd] 。
                    partials['right'] = mag
                else:
                    partials['right']=0.0。
                    indicies['right'] =1。

                引數['left']=0.0
                indicies['left'] =1。

            rightUpdate = rightPos.loc[rightIdx] mag*rightDiffNormed.loc[rightIdx_fwd] 。
            leftUpdate = leftPos.loc[leftIdx] mag*leftDiffNormed.loc[leftIdx_fwd] 。
            midP = midPoint(*rightUpdate.value,*leftUpdate.value)

            rights[0].append(rightUpdate.PositionX)
            rights[1].append(rightUpdate.PositionZ)
            lefts[0].append(leftUpdate.PositionX)
            lefts[1].append(leftUpdate.PositionZ)
            mids[0].append(midP[0])
            mids[1].append(midP[1])

            #print(active_side,indicies['left'],leftIdx,indicies['right'],rightIdx,Mag) 

            if indicies['right'/span>]> =len(rightPos)-1 and indicies['left'] > =len(leftPos)-1。
                Done=Trueexcept 例外 as err:
        traceback.print_exception(None, err, err.__traceback__)

        print(len(rights[0]) 。 len(lefts[0]),len(mids[0))


        axi = plt.subplot()
        axi.plot(*rights,ls='-'/span>,marker='.'/span>,c='r')
        axi.plot(*lefts,ls='-',marker='。',c='b')
        axi.plot(*mids,ls='-',marker='。',c='k')
        axi.set_aspect('equal')

        fig,axes = plt.subplots(2)
        for i in range2)。
            axes[i].plot(rights[i],c='r'/span>)
            axes[i].plot(lefts[i],c='b')
            axes[i].plot(mids[i],c='k')

        #fig,axi = plt.subplots()#for rX,rZ,lX,lZ,mX,mZ in zip(*rights,*lefts,*mids):
            #axi.plot([rX,mX,lX],[rZ,mZ,lZ], c='k')
    最后。
        plt.show()

else:
    print("處理被中止!")

這比我預期的要好,但是:

這比我預期的要好。

  • 它很慢,并且
  • 取決于曲率/曲率差異(我假設這是驅動誤差的原因),在一個特定的轉彎中,兩個回圈之間的曲率/曲率差異導致將中線拉向一側或另一側。
  • 此外,我不確定這是否是一個實施問題或簡化了粗略方法的工件,但對中心線的更新是有噪音/鋸齒的(見下面的評論,我相信這是實施中的一個錯誤)

我正在尋找任何能夠找到中心線的方法。如果它能很好地獲得中心線的法線矢量(及其反面--旋轉180度),以及該法線與任何一個邊界環的相應交點(即--代表軌道上任何一點的中線與起點的距離的線),則可加分。如果中心線的步長被歸一化,則可進一步加分。

考慮到我知道行進方向和兩個環路起點的中心點,我在想一個解決方案,那就是為中心線定義一個步長,然后用這個步長代表一個半徑等于步長的半圓,然后求解與這個圓相切的最短直線,該直線以兩個外環路的交點為界。我在下面粗略地說明了這一點。我不確定是否有一種有效/優雅的方法來使用這種方法進行求解。

感謝您提供的任何反饋/指導。我認為可能有一個已知的解決方案來解決這種型別的問題,而我只是使用了錯誤的搜索條件來尋找例子。

PS - 更加仔細地觀察,似乎外環的更新存在畸變,這可能有助于解釋中線的鋸齒狀更新。無論如何,我認為中線向一側傾斜仍然是該方法的一個缺陷,而不是一個實施問題。

使用乒乓方法的解決方案,顯示中心線向一側或另一側傾斜

使用乒乓方法的解決方案,顯示中心線向一側或另一側傾斜
<p><a href=放大偏斜度高的角落

顯示相對點密度起始線和行進方向的插圖

顯示相對點密度起始線和行進方向的插圖

對中心線的鋸齒狀/噪音狀更新

對中心線的鋸齒狀/噪音狀更新
<p><a href=切線圓環相交法的圖解。
<p><a href=外回圈之一的更新中的畸變,顯示步驟更新中可能的過沖。我已經確認這些工件不存在于兩個環路的原始資料中。

更新。

更新。 這似乎是GIS領域中經常出現的問題,在這個領域中,多段線被用來代表河流的邊界,而河流的中線是需要的。

顯然,一個解決方案是生成一個Voronoi圖。這樣做將自然產生代表中線的多角頂點和邊。

舉例說明。Voronoi

改進后的中線覆寫區域,說明第一種方法有問題

現在我只需要檢測那些位于兩個外部邊界內的Voronoi多邊形頂點。

另外需要注意的是,正如你所期望的那樣,該方法很難處理自相交的軌道,因此我可能需要檢測這種情況,或者通過將軌道切割成多個部分然后再縫合起來來手動防止它。

改進后的可視化,以橙色更好地顯示計算出的Voroinoi頂點

改進后的可視化,以橙色更好地顯示計算出的Voroinoi頂點
<p><a href=自交點的問題

在起點/終點線上也產生了一些假象。 起點終點線上的人工制品

uj5u.com熱心網友回復:

最終,scipy Voronoi和matplotlib path.contains_points的組合能夠找到中線。我還沒有解決自相交的問題,而且在起點和終點的非中線點上還存在一些小問題,但這些問題是相當小的。

下面是作業解決方案的完整代碼:

import pandas as pd import numpy as np from matplotlib import pyplot as plt import matplotlib.path as mpltPath from scipy.spatial import Voronoi import time fDict = {"Bernese Alps":{"fName":"2021-09-12202910_FM7_DASH""left"4,"right":6,"correctStart" :-1}, "Maple Valley":{"fName":"2021-08-30171416_FM7_DASH""left": 4,"right":1,"correctStart":0},}track = :0 track = "Bernese Alps"。 df = pd.read_csv(fDict[track]["fName"/span>] ".csv") # 對應于賽道左右極限的圈數。 lapRight = fDict[track]["right"] lapLeft = fDict[track]["left"] # 找出從實際開始的第一點距離偏移的圈數# (下面 如果任何一圈是0,就會中斷) offsetRight = (df.loc[df.LapNumber==lapRight,['DistanceTraveled']]-df.loc[df.LapNumber==lapRight-1,['DistanceTraveled']]。 max().iloc[0]. values[0] offsetLeft = (df.loc[df.LapNumber==lapLeft,['DistanceTraveled']]-df.loc[df.LapNumber==lapLeft-1,['DistanceTraveled'])。 max().iloc[0].values[0] 。] # 軌道左右邊緣的位置歷史記錄 # 軌道左右邊緣的位置歷史記錄 rightPos = df.loc[df.LapNumber==lapRight,['PositionX','PositionZ']].value leftPos = df.loc[df.LapNumber==lapLeft,['PositionX','PositionZ']].value # Finish line crossing vector to determine precise start finish line from distance traveled[/span finalVectRight = rightPos[-1]-rightPos[0] finalVectLeft = leftPos[-1]-leftPos[0] # 尋找實際的起始點,假設起始點和結束點是行內的# 開始和結束之間的任何對齊問題將導致起始線的傾斜。 rightStart = rightPos[0] finalVectRight/np.sqrt(sum(finalVectRight**2))*offsetRight leftStart = leftPos[0] finalVectLeft/np.sqrt(sum(finalVectLeft**2) )*offsetLeft if fDict[track] in (0,1) 。 # 糾正起始線skey,假設起始線是X或Z軸的法線# (這在起跑線實際上不屬于正常主軸的情況下是行不通的)。 nonStartDirIdx = fDict[track]["correctStart"] rightStart[nonStartDirIdx] = rightPos[0][nonStartDirIdx] 。 leftStart[nonStartDirIdx] = leftPos[0][nonStartDirIdx] 。 #average the starline error (appeared to be on the order of ~ 2-3 inches ) in direction of travel。 startDirIdx = 1 if not nonStartDirIdx else 0 >。 avgStartDirPos = (rightStart[startDirIdx] leftStart[startDirIdx])*.5 rightStart[startDirIdx] = avgStartDirPos leftStart[startDirIdx] = avgStartDirPos # Plot to check[/span fig, axi = plt.subplots() plt.plot(*rightPos.T,'r-') plt.plot(*leftPos.T,'b-') plt.plot(*np.array([rightStart,leftStart]).T,'k-',marker='。') axi.set_aspect('equal') plt.show() # generate poly points to compute Voronoi and find midline[/span]。 # 將左右兩邊的點連接起來以創建開放的多邊形。 polygon = np.concatenate([rightPos,leftPos]) # turn this into matplotlib path object[/span] path = mpltPath.Path(polygon) # then compute Voronoi diagram for the polygon to get the Vornoi verticies vor = Voronoi(polygon) # 確定其中哪些位于多邊形內部# 首先將所考慮的點限制在軌道邊緣延伸的原始物理界限內# 不這樣做會導致內部檢查失敗 # 不這樣做會導致內部檢查失敗 vX = vor.vertices.T[0] vZ = vor.vertices.T[1] vorMask = (vX>=polygon.T[0].min())& (vX<=polygon. T[0].max())& (vZ>=polygon. T[1].min())& (vZ<=polygon.T[1].max() verts = vor.vertices[vorMask]。 print("開始檢查以找到多邊形內的Voronoi頂點...") start=time.time() insideMask = path.contains_points(verts) end=time.time() print(" 檢查哪些{:,d}點位于{:,d}點的多邊形內花了{:,.2f}秒完成。 ".format(len(verts),len(polygon),end-start) midLine = verts[internalMask] (中線) # Plot to check[/span]。 fig, axi = plt.subplots() plt.plot(*rightPos.T,'r-'/span>) plt.plot(*leftPos.T,'b-') plt.plot(*np.array([rightStart,leftStart]).T,'k-',marker='. ' ) plt.scatter(*verts[insideMask].T,color='orange',marker='。',s=.1) axi.set_aspect('equal') plt.show()

而這里是一個輸出的例子:

開始檢查,尋找多邊形內的Voronoi頂點......

檢查164,650個點中哪些位于94,514個點的多邊形內 點中的哪一個位于多邊形的94,514個點內,需要143.72秒才能完成。

帶中線的完整軌道 放大顯示自我交錯仍有問題的區域放大起點終點邊界,其中Voronoi點被發現在邊界多邊形內,但橫跨所需的中線

PS - 使用matplotlib path.contains_points來尋找中線,主要是為了方便使用。正如所指出的那樣,這種方法可能需要一兩分鐘才能從一個由大約10萬個點組成的多邊形中的15萬多個頂點中找到中線。對于這種規模的多邊形和點串列,可能有更有效的解決方案,但這個方法符合我的需求,而且很容易使用。如果你對更快的東西感興趣,請看。在python中檢查一個點是否在一個多邊形內的最快方法是什么

uj5u.com熱心網友回復:

暫時假設在一個特定的位置,外面是兩條相當長的線段。中心線將由與它們的正交投影訃為每條線的距離相等的點組成。我強烈懷疑,如果你的線段以黑森法線形式表示,即ax by c=0,a2 b2=1,那么只要將這兩個方程相加,就可以得到作為角平分線的中心線的方程,即平行線段的相應概括。請確保這些線的法線具有相匹配的方向,例如,從沿中心線行駛的車輛的方向看,所有的線都是向左行駛。

由于你在每一側有多條線段,你需要考慮到它們之間的變化。在任何一邊,你都可能有一個凸面或凹面的頂點,也就是說,在一個(輕微的)角落里,邊界會向外或向內彎曲。如果它向外彎曲,那么就有一個點,中心線與在該角相遇的兩個線段的距離相等。在這一點上,你就用其中一條來定義中心線,而開始用另一條來代替。一個不同的觀點是,兩個連續的線段中的每一個都與對面的線段一起定義自己的中心線,而兩個中心線相交的點就是你從一個線段轉換到另一個線段的地方。你最終又變成了線段。

如果一個角向內彎曲,那么對于中心線上的某些點,該邊界上最近的點將不是線段的正交投影,而是那個角。與一個點和一條線距離相等的所有點的集合是一個拋物線,點是它的焦點,線是它的直角。正交投影將落在那一邊的兩個線段之外。線和線段之間的交叉點將是正交投影與每個線段的終點重合的地方,即在通過其端點的垂直于該線段的線上。你是否準備在你的輸出中處理中心線的拋物線,或者你是否需要以某種方式近似這些?

如果您的兩邊都有相近的角,所有這些都會變得更加復雜。你可能會遇到這樣的情況:中心線的拋物線被直角段的變化所打斷,以及類似的情況。獲得一個完整的解決方案,保證對所有的輸入都做正確的事情,聽起來是一個重大的努力。在大多數典型的使用情況下,能夠合理地作業的東西應該是可以做到的。

到目前為止,這一直是一個相當數學化的答案。為了使我們的演算法更加合理,假設您目前正在查看一對相對的線段以及它們之間的中心線。你的代碼應該確定每條邊上的下一個角,以及該角之后的線段。有了這些資訊,它就可以確定當前的直線中心線將結束于那個角的位置。取兩個變化中較近的一個,以適當的方式將中心線段縫合在一起(可能使用拋物線片),然后用其中一個段交換其后續段。注意那些終點在起點之前的中心線段,那是事情變得混亂的地方。我沒有一個現成的解決方案來處理它們,但可以在測驗資料上檢查它們,以決定在實踐中它們有多大的可能性和多壞。

轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/319961.html

標籤:

上一篇:TinyMCE編輯器不顯示在JQueryUI對話框內

下一篇:檢查例外型別而不考慮TC#

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low,請各位大佬留情,一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁,頂部多層導航

    一個個人用的瀏覽器首頁,可以把一下常用的網站放在這里,平常打開會比較方便。 第一步,HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式,需要用到$(window).height(); 由于手寫demo的時候,過于自信,其實對前端方面的認識也不夠體系,用文本檔案直接敲出來的html代碼,第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前,必須要做好網站資料的備份,這個問題良家佐言是遇見過的;在剛開始接觸WordPress博客程式的時候,因為升級問題和博客網站的修改的一些嘗試,良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名,每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統,受到英文博客愛好者和中文博客愛好者的追捧,并逐步演化成一款內容管理系統軟體;它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新,就會牽動無數WordPress愛好者的心, ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果,首字改變樣式或者首行改變樣式,效果如下圖。 代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽? <a> 標簽定義超鏈接,用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性,它指定鏈接的目標。 a標簽的語法格式:<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中,鏈接的默認外觀如下: 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址: 鏈接:https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼:4aks swiper.min.css地址 鏈接:https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片(全屏顯示,且不拉伸)

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解(上)

    HTML詳解 初識HTML Hyper Text Markup Language(超文本標記語言) 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽,描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年,面對生產環境,盡管都是小心翼翼,慎之又慎,還是難免捅出簍子。輕則滿頭大汗,面紅耳赤。重則系統停擺,損失資金。每一個生產事故的背后,都是寶貴的經驗和教訓,都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故,特開此專題,長期更新和記錄大大小小的各類事故。有些是親身經歷,有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 打開游戲界面,看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上,有一個白色的矩形框,里面不斷下落著各種單詞,而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配,那么我就可以獲得得分;如果我輸入的單詞錯誤或者時間過長,那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前,了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子,引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板(滑鼠和觸摸)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作,和在桌面端做法基本一致。 首先,使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流,并將其傳遞給 <video> 標簽進行渲染。 接著,使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 短視頻已經無數不在了,但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲,一圖頂百辯,且看下圖: 網址鏈接(需在微信或者手Q中瀏覽) 從上圖可以看到,我們主要實作的功能也是本文要講解的有: ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網(www)誕生,HTTP(HyperText Transfer Protocol)經歷了眾多版本迭代,WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more