Skip to content

M
mui
Commit bd2f183c authored by hbcui1984's avatar hbcui1984
Browse files
Options

解决图片预览双指缩放失效的问题

parent d2549d1a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 308 additions and 185 deletions
Gruntfile.js
View file @ bd2f183c
......@@ -62,6 +62,7 @@ module.exports = function(grunt) {
'js/mui.gestures.tap.js',
'js/mui.gestures.longtap.js',
'js/mui.gestures.hold.js',
'js/mui.gestures.pinch.js',
'js/mui.init.js',
'js/mui.init.5+.js',
'js/mui.back.js',
......
dist/js/mui.js
View file @ bd2f183c
......@@ -1655,6 +1655,66 @@ var mui = (function(document, undefined) {
}
});
})(mui, 'hold');
/**
* mui gesture pinch
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
var options = this.options;
var session = $.gestures.session;
switch (event.type) {
case $.EVENT_START:
break;
case $.EVENT_MOVE:
if ($.options.gestureConfig.pinch) {
if (touch.touches.length < 2) {
return;
}
if (!session.pinch) { //start
session.pinch = true;
$.trigger(event.target, name + 'start', touch);
}
$.trigger(event.target, name, touch);
var scale = touch.scale;
var rotation = touch.rotation;
var lastScale = typeof touch.lastScale === 'undefined' ? 1 : touch.lastScale;
var scaleDiff = 0.000000000001; //防止scale与lastScale相等，不触发事件的情况。
if (scale > lastScale) { //out
lastScale = scale - scaleDiff;
$.trigger(event.target, name + 'out', touch);
} //in
else if (scale < lastScale) {
lastScale = scale + scaleDiff;
$.trigger(event.target, name + 'in', touch);
}
if (Math.abs(rotation) > options.minRotationAngle) {
$.trigger(event.target, 'rotate', touch);
}
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
$.trigger(event.target, name + 'end', touch);
}
break;
}
};
/**
* mui gesture pinch
*/
$.registerGesture({
name: name,
index: 10,
handle: handle,
options: {
minRotationAngle: 0
}
});
})(mui, 'pinch');
/**
* mui.init
* @param {type} $
......
dist/js/mui.min.js
View file @ bd2f183c
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/setting.html
View file @ bd2f183c
This diff is collapsed.
examples/hello-mui/examples/template.html
View file @ bd2f183c
......@@ -116,7 +116,7 @@
}
menu.style.display = display;
if(mui.os.android&&parseFloat(mui.os.version)>=4.4){
if(mui.os.android&&aniShow&&parseFloat(mui.os.version)>=4.4){
if(contentWebview==null){
contentWebview = self.children()[0];
}
......
examples/hello-mui/js/feedback-page.js
View file @ bd2f183c
......@@ -62,7 +62,11 @@
if (file) {
var reader = new FileReader();
reader.onload = function() {
placeholder.style.backgroundImage = 'url("' + reader.result + '")';
//处理 android 4.1 兼容问题
var base64 = reader.result.split(',')[1];
var dataUrl = 'data:image/png;base64,' + base64;
//
placeholder.style.backgroundImage = 'url(' + dataUrl + ')';
}
reader.readAsDataURL(file);
placeholder.classList.remove('space');
......@@ -79,7 +83,7 @@
(ui.contact.value != '' &&
ui.contact.value.search(/^(\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+)|([1-9]\d{4,9})$/) != 0)) {
return mui.toast('信息填写不符合规范');
}
}
plus.nativeUI.showWaiting();
feedback.send({
question: ui.question.value,
......
examples/hello-mui/js/feedback.js
View file @ bd2f183c
(function($, feedback, window, document) {
/*******************************************/
/*************** 环信配置开始 ****************/
//以后信息更改后，需卸载 “调试 app” 重新调用运行
var APP_KEY = 'dcloudio#mui';
var CUSTOM_ID = 'customer';
//--
/*************** 环信配置结束 ****************/
//一组 “常量”
var PASSWORD = 'pass01!';
var LOCAL_STORE_KEY = 'mui://user';
var USER_PREFIX = 'mui-user-';
/*******************************************/
/**
* 生成一个 IM 用户名
......
examples/hello-mui/js/mui.dtpicker.js
View file @ bd2f183c
......@@ -339,10 +339,23 @@
},
hide: function() {
var self = this;
if (self.disposed) return;
var ui = self.ui;
ui.picker.classList.remove($.className('active'));
ui.mask.close();
document.body.classList.remove($.className('dtpicker-active-for-page'));
},
dispose: function() {
var self = this;
self.hide();
setTimeout(function() {
self.ui.picker.parentNode.removeChild(self.ui.picker);
for (var name in self) {
self[name] = null;
delete self[name];
};
self.disposed = true;
}, 300);
}
});
......
examples/hello-mui/js/mui.imageViewer.js
View file @ bd2f183c
......@@ -127,7 +127,7 @@
if (touches.length == 2) {
var p1 = touches[0];
var p2 = touches[1];
var x = p1.pageX = p2.pageX; //x1-x2
var x = p1.pageX - p2.pageX; //x1-x2
var y = p1.pageY - p2.pageY; //y1-y2
self.scaleStart = Math.sqrt(x * x + y * y);
self.isMultiTouch = true;
......@@ -143,7 +143,7 @@
event.cancelBubble = true;
var p1 = touches[0];
var p2 = touches[1];
var x = p1.pageX = p2.pageX;
var x = p1.pageX - p2.pageX;
var y = p1.pageY - p2.pageY;
self.scaleEnd = Math.sqrt(x * x + y * y);
self._scaleValue = (self.scaleValue * (self.scaleEnd / self.scaleStart));
......
examples/hello-mui/js/mui.indexedlist.js
View file @ bd2f183c
/**
* 分组列表
* IndexedList
* 类似联系人应用中的联系人列表，可以按首字母分组
* 右侧的字母定位工具条，可以快速定位列表位置
* varstion 1.0.0
......@@ -13,16 +13,16 @@
return '.' + $.className(name);
}
var GroupList = $.GroupList = $.Class.extend({
var IndexedList = $.IndexedList = $.Class.extend({
/**
* 通过 element 和 options 构造 GroupList 实例
* 通过 element 和 options 构造 IndexedList 实例
**/
init: function(holder, options) {
var self = this;
self.options = options || {};
self.box = holder;
if (!self.box) {
throw "实例 GroupList 时需要指定 element";
throw "实例 IndexedList 时需要指定 element";
}
self.createDom();
self.findElements();
......
examples/hello-mui/js/mui.js
View file @ bd2f183c
......@@ -1655,6 +1655,66 @@ var mui = (function(document, undefined) {
}
});
})(mui, 'hold');
/**
* mui gesture pinch
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
var options = this.options;
var session = $.gestures.session;
switch (event.type) {
case $.EVENT_START:
break;
case $.EVENT_MOVE:
if ($.options.gestureConfig.pinch) {
if (touch.touches.length < 2) {
return;
}
if (!session.pinch) { //start
session.pinch = true;
$.trigger(event.target, name + 'start', touch);
}
$.trigger(event.target, name, touch);
var scale = touch.scale;
var rotation = touch.rotation;
var lastScale = typeof touch.lastScale === 'undefined' ? 1 : touch.lastScale;
var scaleDiff = 0.000000000001; //防止scale与lastScale相等，不触发事件的情况。
if (scale > lastScale) { //out
lastScale = scale - scaleDiff;
$.trigger(event.target, name + 'out', touch);
} //in
else if (scale < lastScale) {
lastScale = scale + scaleDiff;
$.trigger(event.target, name + 'in', touch);
}
if (Math.abs(rotation) > options.minRotationAngle) {
$.trigger(event.target, 'rotate', touch);
}
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
$.trigger(event.target, name + 'end', touch);
}
break;
}
};
/**
* mui gesture pinch
*/
$.registerGesture({
name: name,
index: 10,
handle: handle,
options: {
minRotationAngle: 0
}
});
})(mui, 'pinch');
/**
* mui.init
* @param {type} $
......
examples/hello-mui/js/mui.locker.js
View file @ bd2f183c
......@@ -280,14 +280,14 @@
new Locker(element, options);
} else {
var optionsText = element.getAttribute('data-locker-options');
var options = optionsText ? JSON.parse(optionsText) : {};
options.lineColor = element.getAttribute('data-locker-line-color') || options.lineColor;
options.ringColor = element.getAttribute('data-locker-ring-color') || options.ringColor;
options.fillColor = element.getAttribute('data-locker-fill-color') || options.fillColor;
options.pointColor = element.getAttribute('data-locker-point-color') || options.pointColor;
options.width = element.getAttribute('data-locker-width') || options.width;
options.height = element.getAttribute('data-locker-height') || options.height;
new Locker(element, options);
var _options = optionsText ? JSON.parse(optionsText) : {};
_options.lineColor = element.getAttribute('data-locker-line-color') || _options.lineColor;
_options.ringColor = element.getAttribute('data-locker-ring-color') || _options.ringColor;
_options.fillColor = element.getAttribute('data-locker-fill-color') || _options.fillColor;
_options.pointColor = element.getAttribute('data-locker-point-color') || _options.pointColor;
_options.width = element.getAttribute('data-locker-width') || _options.width;
_options.height = element.getAttribute('data-locker-height') || _options.height;
new Locker(element, _options);
}
});
return this;
......
examples/hello-mui/js/mui.locker.md deleted 100644 → 0
View file @ d2549d1a
### 集成方式
1. 首先在页面中引入 mui ，包括相关 style 和 script
### 使用方式
1. 通过实例化 Locker, 示例: new Locker(element, options);
2. 通过扩展方法, 示例: mui('选择器').locker(options);
3. 通过添加 className, 示例: <div class='mui-locker' data-locker-options='{}'></div> (注: data-locker-options 值为 options 的 json 字符串);
### options 结构说明
```javascript
{
lineColor: "#999", //连接线颜色，省略时此参数将使用默认值
ringColor: "#888", //圆圈边框颜色，省略时此参数将使用默认值
fillColor: "#f3f3f3", //圆圈填充颜色，省略时此参数将使用默认值
pointColor: "#777", //圆圈中心点颜色，省略时此参数将使用默认值
width:300 , //宽度，通常省略，省略时可以通过 element 的样式控制
height:300, //高度，通常少略，省略时可以通过 element 的样式控制
}
```
### done 事件
1. 可以通过 element.addEventListener('done',function(event){},false); 处理 "绘的制完成" 事件
2. event.detail.points 为绘制结果，points 是一个数组，包括了当时绘制手势数据
3. event.detail.sender 为当前 "手势解锁" 实例，包括 clear 方法，可以清除当前会制的内容
### 示例
HMTL:
```html
<div id='holder' class="mui-locker" style="width:300px;height:300px;" data-locker-options='{"ringColor":"rgba(221,221,221,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}'></div>
<div id='alert'></div>
```
JavaScript:
```javascript
(function($,doc){
$.init();
var holder = doc.querySelector('#holder'),
alert = doc.querySelector('#alert'),
record = [];
//处理事件
holder.addEventListener('done', function(event) {
var rs = event.detail;
if (rs.points.length < 4) {
alert.innerText = '设定的手势太简单了';
record = [];
rs.sender.clear();
return;
}
record.push(rs.points.join(''));
if (record.length >= 2) {
if (record[0] == record[1]) {
alert.innerText = '手势设定完成';
} else {
alert.innerText = '两次手势设定不一致';
}
rs.sender.clear();
record = [];
} else {
alert.innerText = '请确认手势设定';
rs.sender.clear();
}
});
}(mui,document));
```
examples/hello-mui/js/mui.min.js
View file @ bd2f183c
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/mui.poppicker.js
View file @ bd2f183c
......@@ -104,9 +104,22 @@
//隐藏
hide: function() {
var self = this;
if (self.disposed) return;
self.panel.classList.remove($.className('active'));
self.mask.close();
document.body.classList.remove($.className('poppicker-active-for-page'));
},
dispose: function() {
var self = this;
self.hide();
setTimeout(function() {
self.panel.parentNode.removeChild(self.panel);
for (var name in self) {
self[name] = null;
delete self[name];
};
self.disposed = true;
}, 300);
}
});
......
examples/hello-mui/list.html
View file @ bd2f183c
......@@ -363,11 +363,11 @@
chat（聊天窗口）
</a>
</li>
<li id='feedback' class="mui-table-view-cell">
<!-- <li id='feedback' class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/feedback.html">
feedback（问题反馈）
</a>
</li>
</li> -->
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/imageviewer.html">
image viewer（图片预览）
......@@ -427,7 +427,7 @@
//Android平台暂时使用slide-in-right动画
if(mui.os.android&&parseFloat(mui.os.version)<4.4){
aniShow = "slide-in-right";
document.getElementById('feedback').style.display = 'none';
// document.getElementById('feedback').style.display = 'none';
}
}
//初始化，并预加载webview模式的选项卡
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment