質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

0回答

3045閲覧

ONSEN UI + AngularJSでのピンチイン ピンチアウト

NoriK

総合スコア8

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2017/05/09 22:03

Onsen UIとAngularJSを利用してピンチイン、ピンチアウトで
画像を拡大縮小する機能を作成中ですが、うまくいきません。

コードは下記のようにしています。
まずはピンチイン、ピンチアウトで画像の大きさを5倍となるようにしたいのですが、
ピンチイン、ピンチアウトではイベント自体は拾えていますが(alertを入れるとダイアログが表示される)、
CSSの書き換えがされません。
しかしながら、ng-ClickではCSSの書き換えが正常に行われ、タップすると画像の大きさが5倍になります。

下記のようなコードではピンチイン、ピンチアウトのcssの書き換えができないのでしょうか?
そもそもの考えて方が間違っているのでしょうか?
教えていただければ幸いです。

HTML

1 <ons-gesture-detector ng-click="resize()" ng-pinchin="resize()" ng-pinchout="resize()"> 2 <img ng-src="data:image/png;base64,{{Image}}" ng-style="imageStyle"/> 3 </ons-gesture-detector>

JavaScript

1$scope.resize = (magnification, $event) => { 2 width = 500; 3 $scope.imageStyle = { display: 'block', width: width + '%', height: 'auto' }; 4 };

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問