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

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

ただいまの
回答率

90.53%

  • JavaScript

    19775questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

クリッピングプラグインにて、タップすると画像座標が吹っ飛ぶ

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 366

massiveGorilla

score 11

↓こちらはデモページです。
画像を切り抜きpostするプラグインです。
http://ultimateman.hahaue.com/
これをスマホで起動しますと、誤作動があります。
スマホ操作時、クリッピング中に、画像部分をタップすると、座標が上方向に吹っ飛ぶことがあります。
どうやったらタップしてもその場にとどまってくれるでしょうか。
拙いですが、よろしくお願いします。

下記、jsソース

var cropbox1 = function(options){
    var el = document.querySelector(options.imageBox),
    obj =
    {
        state : {},
        ratio : 1,
        touchmove_bar : 0,
        touchstart_bar : 0,
        options : options,
        imageBox : el,
        thumbBox : el.querySelector(options.thumbBox),
        spinner : el.querySelector(options.spinner),
        image : new Image(),
        getDataURL: function ()
        {
            var width = this.thumbBox.clientWidth,
                height = this.thumbBox.clientHeight,
                canvas = document.createElement("canvas"),
                dim = el.style.backgroundPosition.split(' '),
                size = el.style.backgroundSize.split(' '),
                dx = parseInt(dim[0]) - el.clientWidth/2 + width/2,
                dy = parseInt(dim[1]) - el.clientHeight/2 + height/2,
                dw = parseInt(size[0]),
                dh = parseInt(size[1]),
                sh = parseInt(this.image.height),
                sw = parseInt(this.image.width);

            canvas.width = width;
            canvas.height = height;
            var context = canvas.getContext("2d");
            context.drawImage(this.image, 0, 0, sw, sh, dx, dy, dw, dh);
            var imageData = canvas.toDataURL('image/png');
            return imageData;
        },
        getBlob: function()
        {
            var imageData = this.getDataURL();
            var b64 = imageData.replace('data:image/png;base64,','');
            var binary = atob(b64);
            var array = [];
            for (var i = 0; i < binary.length; i++) {
                array.push(binary.charCodeAt(i));
            }
            return  new Blob([new Uint8Array(array)], {type: 'image/png'});
        },
        zoomIn: function ()
        {
            this.ratio*=1.1;
            setBackground();
        },
        zoomOut: function ()
        {
            this.ratio*=0.9;
            setBackground();
        },
        imgTouch: function ()
        {
            setBackground();
        }
    },
    attachEvent = function(node, event, cb)
    {
        if (node.attachEvent)
            node.attachEvent('on'+event, cb);
        else if (node.addEventListener)
            node.addEventListener(event, cb);
    },
    detachEvent = function(node, event, cb)
    {
        if(node.detachEvent) {
            node.detachEvent('on'+event, cb);
        }
        else if(node.removeEventListener) {
            node.removeEventListener(event, render);
        }
    },
    stopEvent = function (e) {
        if(window.event) e.cancelBubble = true;
        else e.stopImmediatePropagation();
    },
    setBackground = function()
    {
        var w =  parseInt(obj.image.width)*obj.ratio;
        var h =  parseInt(obj.image.height)*obj.ratio;

        var pw = (el.clientWidth - w) / 2;
        var ph = (el.clientHeight - h) / 2;

        el.setAttribute('style',
                'background-image: url(' + obj.image.src + '); ' +
                'background-size: ' + w +'px ' + h + 'px; ' +
                'background-position: ' + pw + 'px ' + ph + 'px; ' +
                'background-repeat: no-repeat');
    },
    imgMouseDown = function(e)
    {
        stopEvent(e);

        obj.state.dragable = true;
        obj.state.mouseX = e.clientX;
        obj.state.mouseY = e.clientY;
    },
    imgMouseMove = function(e)
    {
        stopEvent(e);

        if (obj.state.dragable)
        {
            var x = e.clientX - obj.state.mouseX;
            var y = e.clientY - obj.state.mouseY;

            var bg = el.style.backgroundPosition.split(' ');

            var bgX = x + parseInt(bg[0]);
            var bgY = y + parseInt(bg[1]);

            el.style.backgroundPosition = bgX +'px ' + bgY + 'px';

            obj.state.mouseX = e.clientX;
            obj.state.mouseY = e.clientY;
        }
    },
    imgMouseUp = function(e)
    {
        stopEvent(e);
        obj.state.dragable = false;
    },
    zoomImage = function(e)
    {
        var evt=window.event || e;
        var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta;
        delta > -120 ? obj.ratio*=1.1 : obj.ratio*=0.9;
        setBackground();
    },
    imgTouchstart = function(e){
    if(e.touches.length > 1){
    }
    else{
        stopEvent(e);
        obj.state.dragable = true;
        obj.state.mouseX = e.touches[0].pageX;
        obj.state.mouseY = e.touches[0].pageY;
    }
    },
    imgTouchmove = function(e){
    if(e.touches.length > 1){
    }
    else{
        stopEvent(e);
        if (obj.state.dragable){
            var x = e.touches[0].pageX - obj.state.mouseX;
            var y = e.touches[0].pageY - obj.state.mouseY;
            var bg = el.style.backgroundPosition.split(' ');
            var bgX = x + parseInt(bg[0]);
            var bgY = y + parseInt(bg[1]);
            el.style.backgroundPosition = bgX +'px ' + bgY + 'px';
            obj.state.mouseX = e.touches[0].pageX;
            obj.state.mouseY = e.touches[0].pageY;
        }
    }
    },
    imgTouchend = function(e){
    if(e.touches.length == 1){
         stopEvent(e);
         obj.state.dragable = false;
        }
    }
    obj.spinner.style.display = 'block';
    obj.image.onload = function() {
        obj.spinner.style.display = 'none';
        setBackground();

        attachEvent(el, 'mousedown', imgMouseDown);
        attachEvent(el, 'mousemove', imgMouseMove);
        attachEvent(document.body, 'mouseup', imgMouseUp);
        var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
        attachEvent(el, mousewheel, zoomImage);
        attachEvent(el, 'touchstart', imgTouchstart,false);
        attachEvent(el, 'touchmove', imgTouchmove);
        attachEvent(el, 'touchend', imgTouchend);
    };
    obj.image.src = options.imgSrc;
    attachEvent(el, 'DOMNodeRemoved', function(){detachEvent(document.body, 'DOMNodeRemoved', imgMouseUp)});

    return obj;
};
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • massiveGorilla

    2017/08/30 17:22

    あちらはスマホ操作時のタップのみを禁止するアイデアについてのポストで、こちらはプラグインの誤作動についての相談ポストになります。

    キャンセル

  • think49

    2017/08/30 18:01

    タップを禁止する事でも本質問が解決してしまうので、同じ問題に対して質問をしている事に変わりはないと思いました。タップを禁止する方法をmassiveGorillaさんが知った場合、このスレは「別の方法で解決したのでもう結構です」でクローズされるか、放置される可能性があります。 massiveGorillaさんがそうだとはいいませんが、今まで私はそういう対応をした質問者を数多く見てきました。仮にそう受け取られてしまっても否定できない状況があります。 マルチポストの問題はサイトAで得た情報をサイトBの回答者が知る術がない事にあります。それを避けるためには質問者はあるサイトで得た情報を全てのマルチポスト先に伝え続けなければなりませんが、そこまで考慮されていたでしょうか。 とりあえず、前質問はクローズされたようなので指摘は取り下げますが、前質問も本当の意味で解決したわけではないようですね…。

    キャンセル

  • think49

    2017/08/30 21:39

    いつの間にか https://teratail.com/questions/90454 が再開されてますね。 「タップを禁止するとか、できるのでしょうか。」の削除もそうですが、もやもやするものが残ります…。

    キャンセル

回答 2

check解決した方法

+1

自己解決できました。
1秒以上長押しされたときはスルーし、1秒以内のタッチの場合はイベントを止めるという処理を最後に記述することで対応できました。ありがとうございました。

$(function() {
  var touched = false;
  var touch_time = 0;
  $(".imageBox , .imageBox2").bind({
    'touchstart': function(e) {
      touched = true;
      touch_time = 0;
      document.interval = setInterval(function(){
        touch_time += 100;
        if (touch_time == 1000) {

        }
      }, 100)
      e.preventDefault();
    },
    'touchend': function(e) { 
      if (touched) {
        if (touch_time < 1000 ) {
       event.stopPropagation();        }
      }
      touched = false;
      clearInterval(document.interval);
      e.preventDefault();
    }
  });
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

原因を特定しているわけではないのですが、見た感じbackground-positionが動的に動いてしまってるみたいです。
中央寄せにするならsetBackgroundの中のbackground-position:centerにしてみてはいかがでしょう?

setBackground = function()
    {
        var w =  parseInt(obj.image.width)*obj.ratio;
        var h =  parseInt(obj.image.height)*obj.ratio;

        var pw = (el.clientWidth - w) / 2;
        var ph = (el.clientHeight - h) / 2;

        el.setAttribute('style',
                'background-image: url(' + obj.image.src + '); ' +
                'background-size: ' + w +'px ' + h + 'px; ' +
                'background-position: ' + pw + 'px ' + ph + 'px; ' + //クリックごとにpw,ph分のpx数動いている
                'background-repeat: no-repeat');
    },

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/30 17:50

    ありがとうございます。なるほどpw,ph分のpx数分動いてるとは気づきませんでした…
    しかしこのプラグイン、スワイプで画像を移動できるところもミソですので真ん中固定になってスワイプできなくなってしまうと困るのです。。

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    19775questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。