javascript - 调整浏览器窗口大小时图像不会调整大小 (elm)

Question

我正在尝试监听“调整大小”事件并相应地更改图像大小。但是图像大小不会改变。我认为原因是我的“onResize”功能在错误的地方。但我不知道在这个框架中还有什么地方可以嵌入它。抱歉，如果这听起来微不足道，但我已经阅读文档很长时间了，但找不到解决方案。完整的elm代码如下:

module App where

import Html exposing (..)
import Html.Attributes exposing (attribute, class, style, src, width, height)
import Html.Events exposing (on)
import Json.Decode exposing (object2, (:=), int)
import StartApp.Simple exposing (start)


-- MODEL

type alias Model = 
  { width : Int
  , height : Int
  }

init : Model
init = { width = 800, height = 800 }

-- UPDATE

type Action = NewSize Int Int

update : Action -> Model -> Model
update (NewSize w h) model = 
  { model | width = w, height = h }

-- VIEW

view : Signal.Address Action -> Model -> Html
view address model =
  div
    [ class "container", onResize address ]
    [ div
      []
      [ img
        [ src "http://package.elm-lang.org/assets/elm_logo.svg"
        , width model.width
        , height model.height
        ]
        []
      ] 
    ]

onResize : Signal.Address Action -> Attribute
onResize address =
  on "resize" (getWidthHeight view) (\(w, h) -> Signal.message address (NewSize w h))

getWidthHeight : a -> Json.Decode.Decoder ( Int, Int )
getWidthHeight view =
  object2 (,) ("innerWidth" := int) ("innerHeight" := int)


-- MAIN

main : Signal Html
main =
  start
    { model = init
    , update = update
    , view = view
    }

Answer 1

关于您的解决方案的一些要点。

• 调整大小处理程序似乎确实连接到正确的容器。那很好。
• 您似乎将 View 函数作为参数 getWidthHeight 传递。
  • 这行不通，但您的 getWidthHeight 实际上并没有将它用于任何用途，所以我认为它也不会造成任何伤害。

我相信你想在 getWidthHeight 中使用的 View 是 json 的一部分解码器规则访问 View 以到达窗口，然后提取 innerWidth 和 innerHeight 值。您正在尝试获取 view.innerWidth 和 view.innerHeight。

鉴于调整大小的事件属性的描述，我很确定这就是您想要的解码器。

getWidthHeight : Json.Decode.Decoder (Int, Int)
getWidthHeight =
  object2
    (,)
    (Json.Decode.at ["view", "innerWidth"] int)
    (Json.Decode.at ["view", "innerHeight"] int)

但是我已经在本地应用了这些更改以及其他一些更改，我还没有让您的示例工作，仍在尝试，但我现在遗漏了一些东西。

备用 Hacky 解决方案。

• 我尝试了一个快速破解并得到了一些有用但有点笨拙的东西。
• 我从 StartApp.Simple 切换到 StartApp。
  • 我这样做是为了从 Window.dimensions 添加新的输入流。
• 然后我将 Window.dimension 事件映射到您执行的调整大小操作。

这不适用于初始窗口尺寸，但一旦您开始调整大小，它就会起作用。

module App where

import Effects exposing (Effects, Never)
import Html exposing (..)
import Html.Attributes exposing (attribute, class, style, src, width, height)
import StartApp exposing (start)
import Window


-- MODEL
type alias Model = 
  { width : Int
  , height : Int
  }

init : (Model, Effects Action)
init = 
  ( { width = 200
    , height = 200 }
    , Effects.none
  )

-- UPDATE
type Action = NewSize Int Int

update : Action -> Model -> (Model, Effects Action)
update (NewSize w h) model = 
  ( { model 
    | width = w
    , height = h 
    }
  , Effects.none
  )

-- VIEW

view : Signal.Address Action -> Model -> Html
view address model =
  div
    [ class "container" ] -- , onResize address ]
    [ div
      []
      [ img
        [ src "http://package.elm-lang.org/assets/elm_logo.svg"
        , width model.width
        , height model.height
        ]
        []
      ] 
    ]


main = 
  app.html

-- APP
app =
  start
    { init = init
    , update = update
    , view = view 
    , inputs = 
      [
        Signal.map (\(w,h) -> NewSize w h) Window.dimensions
      ]
    }


--port tasks : Signal (Task.Task Never ())
--port tasks =
--  app.tasks

额外信息。

这里有很多不同事物的有用示例 http://elm-lang.org/examples .使用 Window.dimensions 的示例 http://elm-lang.org/examples/resize-paint可能会帮助您了解一些事情。