Question

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

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的一部分解码器规则访问视图以进入窗口，然后提取innerWidth和innerHeight值。您正试图访问view.innerWidth和view.innerHeight。

鉴于resize的事件属性的描述我很确定这是你想要的解码器。

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

然而，我已在本地和其他一些地方应用了这些更改尚未让您的示例正常工作，仍在尝试，但我现在遗失了一些内容。

Alternate Hacky解决方案。

我尝试了一个快速的黑客并得到了一些有效的东西，但它有点笨重。
我从StartApp.Simple切换到StartApp。
- 我这样做了所以我可以从Window.dimensions添加一个新的输入流。
然后我将Window.dimension事件映射到您的resize操作。

这对初始窗口尺寸不起作用，但是一旦开始调整大小，就可以使其正常工作。

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

调整浏览器窗口大小时图像不会调整大小（榆木）

1 个答案:

Alternate Hacky解决方案。

额外信息。