首頁>Program>source

已经實現了SVG規範的某些部分的瀏覽器(Firefox等)為我们免费进行了命中測試-如果在SVG物件上附加了mousedown侦听器,則每当單击形狀時都会收到通知.這太神奇了,特別是對於複雜的多邊形形狀。

我想知道是否有一種方法可以利用此功能进行更多命中測試.我想知道给定的矩形是否与我的SVG形狀相交.

例如,我向元素添加了3个複雜的多邊形.現在,我想知道矩形(40、40、100、100)是否相交.有没有人知道我如何可以使用已经強大的命中測試支援,而不是自己添加所有這些代碼?

谢谢

最新回復
  • 5月前
    1 #

    SVG 1.1 DOM具有正確的方法(不幸的是,尚未在mozilla中實現):

    var nodelist = svgroot.getIntersectionList(hitrect, null);
    

    有關完整的工作示例,請參见此處。

  • 5月前
    2 #

    我不知道与整个矩形相交的任何方式.但是您可以相交一个點,因此您可以建立一个更複雜的檢查點:

    var el= document.elementFromPoint(x, y);
    

    將為您提供相對於特定頁面相對坐標的最高堆积元素.你会得到的 <svg> 如果未击中SVG內部的任何形狀,則為元素。

    這是非標準的Mozilla擴充套件,但也可以在webKit上使用.不幸的是,尽管它存在於Opera中,但不会在 <svg>內部顯示 ,因此在该瀏覽器上,该元素將始终為SVGSVGElement。

  • 5月前
    3 #

    Chrome的checkIntersection版本(和getIntersectionList)將測試元素邊界框,而不是元素本身.我能够編寫一个自己的checkIntersection,通過使用画佈使用這種相当複雜的方法在chrome上工作,這種方法對於小矩形似乎效果很好,而對於大矩形效果会很慢,因此對命中測試很好.這項技術可以用作Chrome中的checkIntersection的polyfill,小矩形框以及可能破壞了checkIntersection實現的其他瀏覽器。

    建立一个使用包含SVG的externalHTML的資料URI的圖像(您可能還需要在其中包含樣式規則),就像這樣(该圖像不必在頁面中).您可以使用onload事件處理程式来確定何時載入它。

    建立一个画佈用於您的點击測試矩形(此画佈不需要在頁面中)

    要測試矩形是否与您的任何形狀相交,請執行以下操作:

    確保画佈与矩形大小相同(設置其宽度和高度)

    使用画佈上下文的clearRect()方法清除画佈

    在画佈上的-x,-y處绘製SVG,以便与画佈重叠的圖像部分對應於您要使用drawImage()測試的區域

    使用上下文的getImageData()获取画佈的ImageData.資料陣列的第4个元素是alpha位元組,並且非零值意味着SVG的一部分与矩形重叠.如果所有第4个位元組均為0,則您的SVG没有与矩形相交。

  • 5月前
    4 #

    getIntersectionList在Opera中工作正常.我的問题是,与此相關的SVG 1.1完整規範中的功能要求必须渲染元素(以及指標事件的可能目標)才能被檢測為命中.不幸的是,這使得這些功能在当前仅可见一部分世界的遊戲世界中無法用於命中測試。

相似問題

  • 如何在C中生成隨機浮點數
  • Java 9中集合的過載便利工厂方法的重點是什麼