MediaWiki:Gadget-pxruler.js

注意：在保存之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Internet Explorer：按住Ctrl的同时单击刷新，或按Ctrl-F5
• Opera：前往菜单 → 设置（Mac为Opera → Preferences），然后隐私和安全 → 清除浏览数据 → 缓存的图片和文件。

//<nowiki>
// 由ResourceLoader直接调用，不可使用ES6语法
/**
 * @Name: 屏幕像素测距器
 * @Author: [[moegirl:user:商火]]
 * @Version: 1.1
 * @Source: [[moegirl:user:商火/pxruler.js]]
 * @Function: 计算屏幕上两个点的像素差
 */
"use strict";
/*global $, wgULS*/
var x = [null, null, null], y = [null, null, null], flag = false, n = 1;
const p1 = $('<p>').append(['x1:', $('<span>', {id: 'point1x'}), ' y1:', $('<span>', {id: 'point1y'})]),
    p2 = $('<p>').append(['x2:', $('<span>', {id: 'point2x'}), ' y2:', $('<span>', {id: 'point2y'})]),
    pDelta = $('<p>').append(['Δx:', $('<span>', {id: 'deltaX'}), ' Δy:', $('<span>', {id: 'deltaY'})]),
    p3 = $('<p>').append(['x:', $('<span>', {id: 'point3x'}), ' y:', $('<span>', {id: 'point3y'})]),
    table = $('<div>', {id: "pxrulertable", html: [p1, p2, pDelta, p3]}),
    pt = $('<div>', {class: "pxpoint"}),
    points = [table, pt.clone().attr('id', "point1"), pt.clone().attr('id', "point2"), pt.attr('id', "point3")],
    pointDiv = $('<div>', {id: 'pxrulerpoint', html: points}),
    toggle = $('<div>', {id: "pxruler_toggle", text: wgULS("像素测距", "像素測距")}).click(pxruler);
function pxruler() {
    if (flag) { $('body').off('mousedown mousemove mousewheel'); }
    else {
        $('body').mousedown( setpoint ).on('mousemove mousewheel', selecting);
        table.find( 'span' ).text('--');
        $('.pxpoint').css({left: '', top: ''});
        x.fill(null);
        y.fill(null);
        n = 1;
    }
    flag = !flag;
    pointDiv.toggle();
}
function selecting(e) {
    x[0] = e.pageX;
    y[0] = e.pageY;
    pt.css({left: x[0] - 4 + 'px', top: y[0] - 4 + 'px'});
    $('#point3x').text(x[0]);
    $('#point3y').text(y[0]);
}
function setpoint() {
    x[n] = x[0];
    y[n] = y[0];
    points[n].css({left: x[0] - 4 + 'px', top: y[0] - 4 + 'px'});
    pt.css('background-color', n === 1 ? '#6cf' : '');
    $('#point' + n + 'x').text(x[0]);
    $('#point' + n + 'y').text(y[0]);
    n = 3 - n;
    if (!x[2]) { return; }
    $('#deltaX').text(x[2] - x[1]);
    $('#deltaY').text(y[2] - y[1]);
}
$(function() {
    pointDiv.insertAfter( '#footer' ).hide();
    toggle.insertAfter( pointDiv );
});
//</nowiki>
// [[category:作为模块的小工具]] [[category:编辑工具]] [[category:需要用户权限的小工具]] [[category:桌面版小工具]]
// {{DEFAULTSORT:pxruler.js}}