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

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

ただいまの
回答率

89.97%

cropboxタッチイベントについて

解決済

回答 1

投稿 編集

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

massiveGorilla

score 15

クリッピングプラグインにタッチイベントを追加したのですが、なにか動きが
ぎこちないです。
修正点や改善策をお教えいただけたらと思います。

-補足-

タッチしたポイントに追従して画像がスクロールされませんので、追従するようにしたいです。

                <div class="container">
                    <input type="checkbox" id="rotaCheck3">
                    <input type="hidden" id="image3" class="image" name="image" value="">
                    <div class="wrap">
                        <div class="cropped1" id="cropped3"></div>
                        <p>表面</p>
                    </div>
                    <div class="selectOrDelete">
                        <label class="modal-open" id="modal-open3" for="file3">画像を選択</label>
                        <button type="button"  onclick="clearValue3();" class="delete">削除</button>
                    </div>
                    <div class="modal-content" id="modal-content3">
                        <h2>画像の位置とサイズを変更<span class="modal-close">×</span></h2>
                        <div class="imageBox" id="imageBox3">
                            <div class="wrap2">
                                <div class="thumbBox" id="thumbBox3"></div>
                                <div class="rotaSquare" id="rotaSquare3"></div>
                            </div>
                            <div class="spinner" id="spinner3"></div>
                        </div>
                        <div class="action">
                            <input type="file" id="file3" name="clipImage">
                            <label class="reChoice" id="reChoice3" for="file3">画像を選択</label>
                            <button type="button" class="modal-close" id="modal-close3">キャンセル</button>
                            <button type="button" id="btnZoomIn3" class="btnZoomIn"> <img src="img/zoomIn.svg"> </button>
                            <button type="button" id="btnZoomOut3" class="btnZoomOut"> <img src="img/zoomOut.svg"> </button>
                            <label for="rotaCheck3" id="btnRotation3" class="rotaCheckLabel btnRotation"><img src="img/rotation.svg"></label>
                            <button type="button" id="btnCrop3" class="btnCrop">適用</button>
                        </div>
                    </div>
                </div>
window.onload = function() {
        var options =
        {
            imageBox: '#imageBox1',
            thumbBox: '#thumbBox1',
            spinner: '#spinner1',
            imgSrc: 'avatar.png'
}
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();
    },
    //ここからtouchIvent
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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2017/08/28 09:48

    「ぎこちない」では伝わらない部分があると思います。具体的に「○○のようになるはず(なってほしい)が、××のようになってしまう」といった形で表現をお願いします。

    キャンセル

回答 1

check解決した方法

0

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();
    }
  });
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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