クリッピングプラグインにタッチイベントを追加したのですが、なにか動きが
ぎこちないです。
修正点や改善策をお教えいただけたらと思います。
-補足-
タッチしたポイントに追従して画像がスクロールされませんので、追従するようにしたいです。
html
1 <div class="container"> 2 <input type="checkbox" id="rotaCheck3"> 3 <input type="hidden" id="image3" class="image" name="image" value=""> 4 <div class="wrap"> 5 <div class="cropped1" id="cropped3"></div> 6 <p>表面</p> 7 </div> 8 <div class="selectOrDelete"> 9 <label class="modal-open" id="modal-open3" for="file3">画像を選択</label> 10 <button type="button" onclick="clearValue3();" class="delete">削除</button> 11 </div> 12 <div class="modal-content" id="modal-content3"> 13 <h2>画像の位置とサイズを変更<span class="modal-close">×</span></h2> 14 <div class="imageBox" id="imageBox3"> 15 <div class="wrap2"> 16 <div class="thumbBox" id="thumbBox3"></div> 17 <div class="rotaSquare" id="rotaSquare3"></div> 18 </div> 19 <div class="spinner" id="spinner3"></div> 20 </div> 21 <div class="action"> 22 <input type="file" id="file3" name="clipImage"> 23 <label class="reChoice" id="reChoice3" for="file3">画像を選択</label> 24 <button type="button" class="modal-close" id="modal-close3">キャンセル</button> 25 <button type="button" id="btnZoomIn3" class="btnZoomIn"> <img src="img/zoomIn.svg"> </button> 26 <button type="button" id="btnZoomOut3" class="btnZoomOut"> <img src="img/zoomOut.svg"> </button> 27 <label for="rotaCheck3" id="btnRotation3" class="rotaCheckLabel btnRotation"><img src="img/rotation.svg"></label> 28 <button type="button" id="btnCrop3" class="btnCrop">適用</button> 29 </div> 30 </div> 31 </div>
js
1window.onload = function() { 2 var options = 3 { 4 imageBox: '#imageBox1', 5 thumbBox: '#thumbBox1', 6 spinner: '#spinner1', 7 imgSrc: 'avatar.png' 8}
cropbox.js
1var cropbox1 = function(options){ 2 var el = document.querySelector(options.imageBox), 3 obj = 4 { 5 state : {}, 6 ratio : 1, 7 touchmove_bar : 0, 8 touchstart_bar : 0, 9 options : options, 10 imageBox : el, 11 thumbBox : el.querySelector(options.thumbBox), 12 spinner : el.querySelector(options.spinner), 13 image : new Image(), 14 getDataURL: function () 15 { 16 var width = this.thumbBox.clientWidth, 17 height = this.thumbBox.clientHeight, 18 canvas = document.createElement("canvas"), 19 dim = el.style.backgroundPosition.split(' '), 20 size = el.style.backgroundSize.split(' '), 21 dx = parseInt(dim[0]) - el.clientWidth/2 + width/2, 22 dy = parseInt(dim[1]) - el.clientHeight/2 + height/2, 23 dw = parseInt(size[0]), 24 dh = parseInt(size[1]), 25 sh = parseInt(this.image.height), 26 sw = parseInt(this.image.width); 27 28 canvas.width = width; 29 canvas.height = height; 30 var context = canvas.getContext("2d"); 31 context.drawImage(this.image, 0, 0, sw, sh, dx, dy, dw, dh); 32 var imageData = canvas.toDataURL('image/png'); 33 return imageData; 34 }, 35 getBlob: function() 36 { 37 var imageData = this.getDataURL(); 38 var b64 = imageData.replace('data:image/png;base64,',''); 39 var binary = atob(b64); 40 var array = []; 41 for (var i = 0; i < binary.length; i++) { 42 array.push(binary.charCodeAt(i)); 43 } 44 return new Blob([new Uint8Array(array)], {type: 'image/png'}); 45 }, 46 zoomIn: function () 47 { 48 this.ratio*=1.1; 49 setBackground(); 50 }, 51 zoomOut: function () 52 { 53 this.ratio*=0.9; 54 setBackground(); 55 }, 56 imgTouch: function () 57 { 58 setBackground(); 59 } 60 }, 61 attachEvent = function(node, event, cb) 62 { 63 if (node.attachEvent) 64 node.attachEvent('on'+event, cb); 65 else if (node.addEventListener) 66 node.addEventListener(event, cb); 67 }, 68 detachEvent = function(node, event, cb) 69 { 70 if(node.detachEvent) { 71 node.detachEvent('on'+event, cb); 72 } 73 else if(node.removeEventListener) { 74 node.removeEventListener(event, render); 75 } 76 }, 77 stopEvent = function (e) { 78 if(window.event) e.cancelBubble = true; 79 else e.stopImmediatePropagation(); 80 }, 81 setBackground = function() 82 { 83 var w = parseInt(obj.image.width)*obj.ratio; 84 var h = parseInt(obj.image.height)*obj.ratio; 85 86 var pw = (el.clientWidth - w) / 2; 87 var ph = (el.clientHeight - h) / 2; 88 89 el.setAttribute('style', 90 'background-image: url(' + obj.image.src + '); ' + 91 'background-size: ' + w +'px ' + h + 'px; ' + 92 'background-position: ' + pw + 'px ' + ph + 'px; ' + 93 'background-repeat: no-repeat'); 94 }, 95 imgMouseDown = function(e) 96 { 97 stopEvent(e); 98 99 obj.state.dragable = true; 100 obj.state.mouseX = e.clientX; 101 obj.state.mouseY = e.clientY; 102 }, 103 imgMouseMove = function(e) 104 { 105 stopEvent(e); 106 107 if (obj.state.dragable) 108 { 109 var x = e.clientX - obj.state.mouseX; 110 var y = e.clientY - obj.state.mouseY; 111 112 var bg = el.style.backgroundPosition.split(' '); 113 114 var bgX = x + parseInt(bg[0]); 115 var bgY = y + parseInt(bg[1]); 116 117 el.style.backgroundPosition = bgX +'px ' + bgY + 'px'; 118 119 obj.state.mouseX = e.clientX; 120 obj.state.mouseY = e.clientY; 121 } 122 }, 123 imgMouseUp = function(e) 124 { 125 stopEvent(e); 126 obj.state.dragable = false; 127 }, 128 zoomImage = function(e) 129 { 130 var evt=window.event || e; 131 var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta; 132 delta > -120 ? obj.ratio*=1.1 : obj.ratio*=0.9; 133 setBackground(); 134 }, 135 //ここからtouchIvent 136imgTouchstart = function(e){ 137 if(e.touches.length > 1){ 138 } 139 else{ 140 stopEvent(e); 141 obj.state.dragable = true; 142 obj.state.mouseX = e.touches[0].pageX; 143 obj.state.mouseY = e.touches[0].pageY; 144 } 145}, 146imgTouchmove = function(e){ 147 if(e.touches.length > 1){ 148 } 149 else{ 150 stopEvent(e); 151 if (obj.state.dragable){ 152 var x = e.touches[0].pageX - obj.state.mouseX; 153 var y = e.touches[0].pageY - obj.state.mouseY; 154 var bg = el.style.backgroundPosition.split(' '); 155 var bgX = x + parseInt(bg[0]); 156 var bgY = y + parseInt(bg[1]); 157 el.style.backgroundPosition = bgX +'px ' + bgY + 'px'; 158 obj.state.mouseX = e.touches[0].pageX; 159 obj.state.mouseY = e.touches[0].pageY; 160 } 161 } 162}, 163imgTouchend = function(e){ 164 if(e.touches.length == 1){ 165 stopEvent(e); 166 obj.state.dragable = false; 167 } 168} 169 //ここまで 170 obj.spinner.style.display = 'block'; 171 obj.image.onload = function() { 172 obj.spinner.style.display = 'none'; 173 setBackground(); 174 175 attachEvent(el, 'mousedown', imgMouseDown); 176 attachEvent(el, 'mousemove', imgMouseMove); 177 attachEvent(document.body, 'mouseup', imgMouseUp); 178 var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel'; 179 attachEvent(el, mousewheel, zoomImage); 180 attachEvent(el, 'touchstart', imgTouchstart,false); 181 attachEvent(el, 'touchmove', imgTouchmove); 182 attachEvent(el, 'touchend', imgTouchend); 183 }; 184 obj.image.src = options.imgSrc; 185 attachEvent(el, 'DOMNodeRemoved', function(){detachEvent(document.body, 'DOMNodeRemoved', imgMouseUp)}); 186 187 return obj; 188};
回答1件
あなたの回答
tips
プレビュー