帶有Window Shadow的Adobe AIR HTML應用程序

Question

我一直在構建一個基於HTML的AIR應用程序，它使用透明窗口（不使用系統鑲邊）。 我希望窗口有一個陰影效果，它使用JavaScript和CSS3的組合我根據窗口焦點改變陰影。 當窗口最大化時，陰影將被完全移除。

該應用程序如下所示（線框圖）：

在此輸入圖像描述

紅色區域是<html>容器本身。 藍色框是應用程序內容區域（簡單的<div> ），帶有綠色陰影的黑色邊框是在頁面上絕對定位的容器<div> 。 這個黑色容器是我設計中的應用程序。

如您所見，黑色邊框（藍色框周圍）在頁面的外邊緣有一個微妙的綠色陰影。

問題是因為<html>是AIR中的應用程序，這意味着應用程序永遠不會觸及屏幕邊緣，因為AIR將<html>視為應用程序邊緣而不是容器<div>為黑色邊框。

關於如何解決這個問題的任何想法？ 我唯一能想到的是一些瘋狂的JavaScript，可能會以某種方式抵消應用程序......其他人有這個問題嗎？

Answer 1

我可能沒有正確理解這個問題，或者我錯過了AIR的限制，但我不明白為什么你想到的解決方案會很難。

當通過拖放移動應用程序窗口時，只需將窗口保留在放置它的位置而不檢查“屏幕”邊界將起作用。 如果您確實想要檢查邊界，只需允許用戶通過邊框的寬度進行邊界檢查。

當應用程序窗口最大化時，您可以使用等於邊框寬度的負值來偏移應用程序容器，並向應用程序（而不是其容器）提供屏幕的寬度和高度。

由於我目前無法測試我作為AIR應用程序所說的內容，因此我將使用您可以在jsfiddle中測試的一些代碼來說明它。 我使用jquery來簡化代碼。 你是這個意思嗎？

HTML：

<div id="appContainer">
    <div id="app">
        <a id="maximize" href="#">Maximize</a>
    </div>
</div>

CSS：

#appContainer {
    background-color: black;
    width: 106px;
    height: 106px;
    position: absolute;
}

#app {
    background-color: blue;
    width: 100px;
    height: 100px;
    margin: 3px;
}

使用Javascript：

$("#maximize").click(function(){
    var $app = $("#app");
    var $appContainer = $app.parent();
    var borderWidth = parseInt($app.css('margin'));
    $appContainer.offset({top: -borderWidth, left: -borderWidth});
    $app.width($(document).width());
    $app.height($(document).height());
});

帶有Window Shadow的Adobe AIR HTML應用程序

問題描述

1 個解決方案

解決方案1
0 2014-06-07 17:29:17

帶有Window Shadow的Adobe AIR HTML應用程序

問題描述

1 個解決方案

解決方案1 0 2014-06-07 17:29:17

解決方案1
0 2014-06-07 17:29:17