调整浏览器大小时图像不会调整大小 window (elm)

Question

我正在尝试监听 "resize" 事件并相应地更改图像大小。但是图像大小不会改变。我认为原因是我的 "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

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

调整大小处理程序似乎正在附加到正确的容器。不错。
您似乎将视图函数作为参数 getWidthHeight 传递。
- 这行不通，但您的 getWidthHeight 实际上并没有将其用于任何用途，所以我认为它也不会造成任何伤害。

我相信你想在 getWidthHeight 中使用的视图是 json 解码器规则访问视图以到达 window，然后提取 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 事件映射到您执行的调整大小操作。

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

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 的示例可能会帮助您稍微理解一些事情。

调整浏览器大小时图像不会调整大小 window (elm)

Image does not resize when resizing the browser window (elm)

javascript

css

dom-events

elm

备用 Hacky 解决方案。

额外信息