Kontrollermedmusen
Erfaren
Introduksjon
Denneoppgavenviserhvordanvikanbrukemusentilåkontrollereelm-programmenevåre.
Steg1:Viseenposisjon
Vistarterutmedåviseensirkelpåengittposisjon.Hermåvikombineretotingsomharværtitidligereoppgaver:
Viseensirkelmedmusen(TegningmedSVG)
Bruke Html.program istedetfor Html.beginnerProgram (Tellsekunder)
Vitrenger Html.program fordiviskallyttepåmusebevegelserpåsammemåtesomvitidligerelyttetpåtid.
FørstsettervioppSVGtilåviseenballvikanstyreposisjonentil:
importSvgexposing(svg,circle,rect)
importSvg.Attributesexposing(width,height,viewBox,cx,cy,r,fill,x,y,width,height)
importMouseexposing(Position)
p=Position1020
model=
{position=p
}
main=
viewmodel
viewmodel=
svg
[width"500",height"500",viewBox"00200200"]
[circle[cx(toStringmodel.position.x)
,cy(toStringmodel.position.y)
,r"10",fill"blue"][]
]
Endretallene 10 og 20 sominngåriverdien p .
Hvagjørdetførstetallet?
Hvagjørdetandretallet?
Steg2:Bruke Html.program
Herereteksempelpåhva Html.program trengersominput:
main=
Html.program
{init=init
,view=view
,update=update
,subscriptions=subscriptions
}
Elm
init ertilstandentilprogrammetvårtnårvistarteropp.
view erhvordanvivisertilstandentilprogrammetvårt.
update erhvordantilstandentilprogrammetvårtreagererpånyehendelser.
subscriptions erhvilkehendelserprogrammetvårtskalreagerepå.
Verdienvikalte p iforrigeavsnittkanvibrukedirektesom init . view harvialleredeskrevet.Laossfylleinnupdateog
subscriptionssomikkegjørnoe.
Vileggerinnenvarianthvor update girtilbakemodellenuendret,og subscriptions ignorereraltsomkommerinn:
importSvgexposing(svg,circle,rect)
importSvg.Attributesexposing(width,height,viewBox,cx,cy,r,fill,x,y,width,height)
importMouseexposing(Position)
importHtml
p=Position1020
init=
({position=p
}
,Cmd.none
)
main=
Html.program
{init=init
,view=view
,update=update
,subscriptions=subscriptions
}
viewmodel=
svg
[width"500",height"500",viewBox"00200200"]
[circle[cx(toStringmodel.position.x)
,cy(toStringmodel.position.y)
,r"10",fill"blue"][]
]
typeMsg=
NoChange
typealiasModel=
{position:Position
}
update:Msg->Model->(Model,CmdMsg)
updatemsgmodel=
(model,Cmd.none)
subscriptionsmodel=
Sub.batch[Mouse.movesDragAt,Mouse.upsDragEnd]
Steg3:koblepåmusen
Vikoblerpåmus:
importSvgexposing(svg,circle,rect)
importSvg.Attributesexposing(width,height,viewBox,cx,cy,r,fill,x,y,width,height)
importMouseexposing(Position)
importHtml
p=Position1020
init=
({position=p
}
,Cmd.none
)
main=
Html.program
{init=init
,view=view
,update=update
,subscriptions=subscriptions
}
viewmodel=
svg
[width"500",height"500",viewBox"00200200"]
[circle[cx(toStringmodel.position.x)
,cy(toStringmodel.position.y)
,r"10",fill"blue"][]
]
typeMsg=
MouseAtPosition
typealiasModel=
{position:Position
}
update:Msg->Model->(Model,CmdMsg)
updatemsgmodel=
casemsgof
MouseAtpos->
({model|position=pos}
,Cmd.none)
subscriptionsmodel=
Sub.batch[Mouse.movesMouseAt]
Hererdetnoerart!Ballenerikkesammestedsompekeren.Hvorfor?
PrøvåendreviewboxeniSVG:
[width"500",height"500",viewBox"00200200"]
Hvordanhengerdettesammen?
Lisens: CCBY-SA4.0 Forfatter: TeodorHeggelund