오늘의 목표

이런 일을 할 수 있도록 한다.

※ 조금 이미지 무서워 죄송합니다.

무엇을 위해 사용합니까?

그럼 AR이라든지 그런 것 때문이지만 www
그 외에도 동영상에 어떤 정보를 표시하고 싶을 때
미리 만든 이미지를 지정된 범위 내에 표시하거나 그렇게 할 수 있습니다.

참고로 한 사이트

@h-nagao 님의
PowerApps로 타코미터 만들기

주식회사 TAM님
CSS만으로 이미지를 자를 수있었습니다.

조속 제작 개시

트리밍용 CSS 준비

trimming.css

.trim img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
}

이것을 PowerApps에 반영하려면

@h-nagao 님의 페이지에 있듯이 HTML 텍스트를 사용하십시오!


입력하는 내용이지만 CSS는 DIV 태그에 직접 쓸 필요가 있기 때문에 이렇게 합니다.

Htmltext1(HtmlText)

"<div style='
    position: absolute;
    top: 0%;
    left: 0%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 50%;
    height: auto;
'>
</div>"

이제 위의 CSS와 비슷한 선언을 할 수있었습니다.
그러나 이것은 이미지가 지정되지 않았기 때문에 아무 것도 표시하지 않습니다.

그래서 DIV 태그 사이에 IMG 태그를 사용하여 미리 PowerApps에 업로드하는 이미지 데이터를 지정해 보겠습니다.


Htmltext1(HtmlText)

"<div style='
    position: absolute;
    top: 0%;
    left: 0%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 50%;
    height: auto;
'><img src='" &  talk4_green_man  & "'>
</div>"

글쎄, 봤어?
아마 표시되지 않는다고 생각합니다・・・.
PowerApps에 업로드한 이미지 데이터의 경로가 아니라 Base64의 데이터를 전달하고 있기 때문에 표시할 수 없을까 생각됩니다.
이미지를 지정하면

appres://resources/<イメージ名>

이것이 읽을 수없는 것 같습니다.
아마 사양이겠지요.

우선 URL을 직접 지정해 봅시다.

Htmltext1(HtmlText)

"<div style='
    position: absolute;
    top: 0%;
    left: 0%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 50%;
    height: auto;
'><img src='https://1.bp.blogspot.com/-sT0aNSDSNd8/W6DT3AoIEtI/AAAAAAABO_4/OH0B97M-Hu8lyzYFM6V1m-z0qCx-WV_bgCLcBGAs/s800/talk4_green_man.png'>
</div>"

그러면 이런 느낌으로 표시된다고 생각됩니다.


그리고는, 슬라이더 등을 사용해, 동적 파라미터를 Left 되어 Top 되는 곳에 대입하면
이미지가 좋은 느낌으로 움직이고 HTML 텍스트 범위 내에서만 표시됩니다.

최종 시스템

Htmltext1(HtmlText)

"<div style='
    position: absolute;
    top: 0%;
    left: "& Slider1.Value &"%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 50%;
    height: auto;
'><img src='https://1.bp.blogspot.com/-sT0aNSDSNd8/W6DT3AoIEtI/AAAAAAABO_4/OH0B97M-Hu8lyzYFM6V1m-z0qCx-WV_bgCLcBGAs/s800/talk4_green_man.png'>
</div>"

오버레이 정보

PowerApps 자체, 레이어 구조로 되어 있기 때문에, 카메라상에 어떠한 오브젝트를 두면
그것만으로 오버레이는 됩니다만, 역시 독자적인 정교한 이미지를 붙이고 싶을 때
PowerApps의 선이라든지 □라든지를 조합해 만드는 것은 상당히 귀찮은 것입니다.
이번은 그 타개책의 일례로서 소개했습니다.
그 밖에도 이런 방법이 있어! 무슨 정보가 있으면 꼭 코멘트 등으로 알려주세요!