Skip to content

优化：触摸支持、手动模式 #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nickhoo555 wants to merge 8 commits into
base: master
Choose a base branch
from
Open

优化：触摸支持、手动模式 #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
db4c57f
feat: touch
nickhoo555 Sep 6, 2024
6c4c923
bad
nickhoo555 Sep 6, 2024
f4cad35
Revert "bad"
nickhoo555 Sep 6, 2024
9322239
4o yes
nickhoo555 Sep 6, 2024
f3e9414
touch 优化
nickhoo555 Sep 6, 2024
a78c86e
遮挡优化
nickhoo555 Sep 6, 2024
943ec6e
lint
nickhoo555 Sep 6, 2024
b5340ab
speed
nickhoo555 Oct 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
194 changes: 118 additions & 76 deletions dist/TagCloud.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,39 @@
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.TagCloud = factory());
}(this, (function () { 'use strict';
}(this, function () { 'use strict';

function _classCallCheck(a, n) {
if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
}
function _defineProperties(e, r) {
for (var t = 0; t < r.length; t++) {
var o = r[t];
o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
}
}
function _createClass(e, r, t) {
return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
writable: !1
}), e;
}
function _defineProperty(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
Expand All @@ -30,69 +61,19 @@
}
return e;
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
Object.defineProperty(Constructor, "prototype", {
writable: false
});
return Constructor;
}
function _defineProperty(obj, key, value) {
key = _toPropertyKey(key);
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _toPrimitive(input, hint) {
if (typeof input !== "object" || input === null) return input;
var prim = input[Symbol.toPrimitive];
if (prim !== undefined) {
var res = prim.call(input, hint || "default");
if (typeof res !== "object") return res;
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (hint === "string" ? String : Number)(input);
return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(arg) {
var key = _toPrimitive(arg, "string");
return typeof key === "symbol" ? key : String(key);
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}

/**
Expand Down Expand Up @@ -124,6 +105,16 @@
self.keep = self.config.keep; // whether to keep rolling after mouse out area
self.paused = false; // keep state to pause the animation

this.touchVelocity = {
x: 0,
y: 0
};
this.lastTouchPosition = {
x: 0,
y: 0
};
this.lastTouchTime = 0;

// create element
self._createElment();
// init
Expand All @@ -138,7 +129,7 @@

/* static method */
// all TagCloud list
_createClass(TagCloud, [{
return _createClass(TagCloud, [{
key: "_createElment",
value: /* instance property method */
// create elment
Expand Down Expand Up @@ -255,23 +246,58 @@
self.mouseX = self.mouseX0; // current distance between the mouse and rolling center x axis
self.mouseY = self.mouseY0; // current distance between the mouse and rolling center y axis

var isTouchDevice = window.matchMedia('(hover: hover)');
if (!isTouchDevice || isTouchDevice.matches) {
// mouseover
TagCloud._on(self.$el, 'mouseover', function () {
// 检测是否支持触摸
var isTouchDevice = 'ontouchstart' in window || window.navigator && window.navigator.maxTouchPoints > 0;
if (isTouchDevice) {
// 触摸开始
TagCloud._on(self.$el, 'touchstart', function () {
self.active = true;
});
// mouseout
TagCloud._on(self.$el, 'mouseout', function () {
// 触摸结束
TagCloud._on(self.$el, 'touchend', function () {
self.active = false;
});
// mousemove
TagCloud._on(self.keep ? window : self.$el, 'mousemove', function (ev) {
ev = ev || window.event;
var rect = self.$el.getBoundingClientRect();
self.mouseX = (ev.clientX - (rect.left + rect.width / 2)) / 5;
self.mouseY = (ev.clientY - (rect.top + rect.height / 2)) / 5;
// 触摸移动
TagCloud._on(self.keep ? window : self.$el, 'touchmove', function (ev) {
ev.preventDefault();
ev.stopPropagation();
if (ev.touches.length === 1) {
var touch = ev.touches[0];
var rect = self.$el.getBoundingClientRect();
var currentX = (touch.clientX - (rect.left + rect.width / 2)) / 5;
var currentY = (touch.clientY - (rect.top + rect.height / 2)) / 5;
var currentTime = Date.now();
var deltaTime = currentTime - self.lastTouchTime;
if (deltaTime > 0) {
self.touchVelocity.x = (currentX - self.lastTouchPosition.x) / deltaTime;
self.touchVelocity.y = (currentY - self.lastTouchPosition.y) / deltaTime;
}
self.mouseX = currentX;
self.mouseY = currentY;
self.lastTouchPosition.x = currentX;
self.lastTouchPosition.y = currentY;
self.lastTouchTime = currentTime;
}
}, {
passive: false
});
} else {
// 鼠标事件
var hasHoverSupport = window.matchMedia('(hover: hover)').matches;
if (hasHoverSupport) {
TagCloud._on(self.$el, 'mouseover', function () {
self.active = true;
});
TagCloud._on(self.$el, 'mouseout', function () {
self.active = false;
});
TagCloud._on(self.keep ? window : self.$el, 'mousemove', function (ev) {
ev = ev || window.event;
var rect = self.$el.getBoundingClientRect();
self.mouseX = (ev.clientX - (rect.left + rect.width / 2)) / 5;
self.mouseY = (ev.clientY - (rect.top + rect.height / 2)) / 5;
});
}
}

// update state regularly
Expand All @@ -296,6 +322,22 @@
self.mouseY = Math.abs(self.mouseY - self.mouseY0) < 1 ? self.mouseY0 : (self.mouseY + self.mouseY0) / 2; // reset distance between the mouse and rolling center y axis
}

// 根据触摸速度调整鼠标位置
if (!self.active) {
var velocityFactor = 50; // 调整这个值以控制惯性效果
self.mouseX += self.touchVelocity.x * velocityFactor;
self.mouseY += self.touchVelocity.y * velocityFactor;

// 逐渐减小速度
self.touchVelocity.x *= 0.95;
self.touchVelocity.y *= 0.95;

// 如果速度很小,就停止
if (Math.abs(self.touchVelocity.x) < 0.01 && Math.abs(self.touchVelocity.y) < 0.01) {
self.touchVelocity.x = 0;
self.touchVelocity.y = 0;
}
}
var a = -(Math.min(Math.max(-self.mouseY, -self.size), self.size) / self.radius) * self.maxSpeed;
var b = Math.min(Math.max(-self.mouseX, -self.size), self.size) / self.radius * self.maxSpeed;

Expand Down Expand Up @@ -334,6 +376,7 @@
itemEl.style.transform = transform;
itemEl.style.filter = "alpha(opacity=".concat(100 * alpha, ")");
itemEl.style.opacity = alpha;
itemEl.style.zIndex = Math.round(per * 1000); // 更新 z-index
});
}

Expand Down Expand Up @@ -415,7 +458,6 @@
}
}
}]);
return TagCloud;
}();
TagCloud.list = [];
// default config
Expand Down Expand Up @@ -466,4 +508,4 @@

return index;

})));
}));
Loading