to:sync
This commit is contained in:
shaoyongjun
parent
a49ec71091
commit
4f675f46b2
@ -302,9 +302,8 @@ export class MyUtils {
|
||||
}
|
||||
|
||||
|
||||
RefreshBodyFrontSize() {
|
||||
RefreshEditFrontSize() {
|
||||
let dpr = window.devicePixelRatio || 1;//当前设置下 物理像素和虚拟像素的比值
|
||||
let defaultFrontSize = window.myEdit.ctx.bodyFrontSize;
|
||||
if (!dpr) {
|
||||
//devicePixelRatio这个属性是可以获取到设备的dpr
|
||||
let devicePixelRatio = win.devicePixelRatio;
|
||||
@ -325,14 +324,14 @@ export class MyUtils {
|
||||
}
|
||||
}
|
||||
|
||||
let myEditFrontSize = document.getElementById("noteshare");
|
||||
if (document.documentElement.clientWidth <= 720) {
|
||||
document.body.style.fontSize = defaultFrontSize + 'px';
|
||||
myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize + 'px';
|
||||
} else {
|
||||
document.body.style.fontSize = defaultFrontSize * dpr + 'px';
|
||||
myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize * dpr + 'px';
|
||||
}
|
||||
|
||||
|
||||
console.log("body-frontSize: ", document.body.style.fontSize);
|
||||
console.log("body-frontSize: ", myEditFrontSize.style.fontSize);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -63,11 +63,11 @@ export class MyEventListener {
|
||||
}
|
||||
|
||||
/**
|
||||
* 窗口撤销事件
|
||||
* 全屏 鼠标按下 或者 手指按下事件
|
||||
* @param e
|
||||
* @constructor
|
||||
*/
|
||||
WindowsKeydownHandle(e) {
|
||||
WindowsKeydownOrTouchendHandle(e) {
|
||||
const event = window.myEdit.utils.ParseEvent(e);
|
||||
const keyCode = window.myEdit.utils.GetKeyCode(event);
|
||||
const metaKey = event.metaKey;
|
||||
@ -76,6 +76,7 @@ export class MyEventListener {
|
||||
testDiv.innerText = "键盘输入: keyCode:" + keyCode +
|
||||
"\nmetaKey:" + metaKey;
|
||||
|
||||
//支持全屏撤销
|
||||
if (metaKey && keyCode === 90) {
|
||||
window.myEdit.biz.cancelHandle(event);
|
||||
}
|
||||
@ -128,11 +129,11 @@ export class MyEventListener {
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听鼠标抬起事件
|
||||
* 监听鼠标抬起 或者手指抬起 事件
|
||||
* @param e
|
||||
* @constructor
|
||||
*/
|
||||
MouseUp(e) {
|
||||
MouseUpOrTouchend(e) {
|
||||
let styleUtils = document.getElementById("_style_utils");
|
||||
if (window.myEdit.utils.GetSelection().isCollapsed) {
|
||||
console.log("none")
|
||||
@ -155,12 +156,28 @@ export class MyEventListener {
|
||||
let x = event.pageX || event.clientX + scrollX;
|
||||
let y = event.pageY || event.clientY + scrollY;
|
||||
|
||||
console.log("posX: ", x, " posY: ", y, event.pageX, event.pageY, scrollX, scrollY, event.clientX, event.clientY);
|
||||
|
||||
//
|
||||
let curEditFrontSize = window.myEdit.ctx.editFrontSize
|
||||
styleUtils.style.display = "block";
|
||||
styleUtils.style.left = (event.clientX - 80) + "px";
|
||||
styleUtils.style.top = (event.clientY - 80) + "px";
|
||||
let limit = curEditFrontSize * 10;
|
||||
console.log("posX: ", x, " posY: ", y, event.pageX, event.pageY, scrollX, scrollY, event.clientX, event.clientY, limit);
|
||||
if (y > limit && x > limit) {
|
||||
styleUtils.style.left = (x - 8 * curEditFrontSize) + "px";
|
||||
styleUtils.style.top = (y - 6 * curEditFrontSize) + "px";
|
||||
} else {
|
||||
if (x < limit) {
|
||||
styleUtils.style.left = (x + 3 * curEditFrontSize) + "px";
|
||||
} else {
|
||||
styleUtils.style.left = (x - 8 * curEditFrontSize) + "px";
|
||||
}
|
||||
if (y < limit) {
|
||||
styleUtils.style.top = (y + 3 * curEditFrontSize) + "px";
|
||||
} else {
|
||||
styleUtils.style.top = (y - 6 * curEditFrontSize) + "px";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// window.myEdit.utils.ProhibitDefaultEvent(event);
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@ import {MyEventListener} from "./event/MyEventListener.js";
|
||||
/**
|
||||
* 默认body front-size 单位px
|
||||
*/
|
||||
bodyFrontSize: 14,
|
||||
editFrontSize: 14,
|
||||
/**
|
||||
* 设计稿宽度 375
|
||||
*/
|
||||
@ -96,23 +96,24 @@ import {MyEventListener} from "./event/MyEventListener.js";
|
||||
* 窗口重载&文档重载事件 for 响应式
|
||||
*/
|
||||
window.myEdit.utils.RefreshRootFrontSize();
|
||||
window.myEdit.utils.RefreshBodyFrontSize();
|
||||
window.myEdit.utils.RefreshEditFrontSize();
|
||||
document.addEventListener('DOMContentLoaded', window.myEdit.utils.RefreshRootFrontSize);
|
||||
document.addEventListener('DOMContentLoaded', window.myEdit.utils.RefreshBodyFrontSize);
|
||||
document.addEventListener('DOMContentLoaded', window.myEdit.utils.RefreshEditFrontSize);
|
||||
window.addEventListener('pageshow', function (e) {
|
||||
if (e.persisted) {
|
||||
window.myEdit.utils.RefreshRootFrontSize();
|
||||
window.myEdit.utils.RefreshBodyFrontSize();
|
||||
window.myEdit.utils.RefreshEditFrontSize();
|
||||
}
|
||||
});
|
||||
window.addEventListener('resize', window.myEdit.utils.RefreshRootFrontSize);
|
||||
window.addEventListener('resize', window.myEdit.utils.RefreshBodyFrontSize);
|
||||
window.addEventListener('resize', window.myEdit.utils.RefreshEditFrontSize);
|
||||
/**
|
||||
* 窗口撤销事件.
|
||||
* js中的键盘事件只有三种：keydown、keyup、keypress。它们触发的顺序是：keydown -> keypress -> keyup。当按下一个键不放开，一般会重复地触发 keydown+keypress，直到放开后触发一个 keyup 事件。
|
||||
*
|
||||
*/
|
||||
window.addEventListener('keydown', window.myEdit.eventListener.WindowsKeydownHandle, true);
|
||||
window.addEventListener('keydown', window.myEdit.eventListener.WindowsKeydownOrTouchendHandle, true);
|
||||
window.addEventListener('touchend', window.myEdit.eventListener.WindowsKeydownOrTouchendHandle, true);
|
||||
}());
|
||||
|
||||
/**
|
||||
@ -153,7 +154,9 @@ window.onload = function () {
|
||||
|
||||
|
||||
//监听鼠标抬起事件
|
||||
document.getElementById("noteshare").addEventListener("mouseup", window.myEdit.eventListener.MouseUp, true);
|
||||
document.getElementById("noteshare").addEventListener("mouseup", window.myEdit.eventListener.MouseUpOrTouchend, true);
|
||||
//监听手指抬起事件
|
||||
document.getElementById("noteshare").addEventListener("touchend", window.myEdit.eventListener.MouseUpOrTouchend, true);
|
||||
//这里监听鼠标按下事件
|
||||
document.getElementById("_style_utils").addEventListener("mousedown", function (e) {
|
||||
const event = window.myEdit.utils.ParseEvent(e);
|
||||
|
||||
@ -126,7 +126,23 @@
|
||||
</div>
|
||||
</footer>
|
||||
<div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%;"></div>
|
||||
|
||||
<p style="font-size: 16px;">
|
||||
<span><button onclick="plusPx()">+</button></span>
|
||||
<span><button onclick="reducePx()">-</button></span>
|
||||
</p>
|
||||
</body>
|
||||
|
||||
|
||||
<script>
|
||||
function plusPx() {
|
||||
window.myEdit.ctx.editFrontSize += 1;
|
||||
window.myEdit.utils.RefreshEditFrontSize();
|
||||
}
|
||||
|
||||
function reducePx() {
|
||||
window.myEdit.ctx.editFrontSize += -1;
|
||||
window.myEdit.utils.RefreshEditFrontSize();
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user