weex-nuke/lib/node_modules/nuke-helper/src/hair-line.js

基于 Rax 、Weex 的高性能组件体系 ~~

import { isWeb } from 'nuke-env';

import { borderSeperate } from './border-seperate';

const hairLine = {};
/**
 * 设备是否支持 0.5px
 * decide if container support 0.5px in web env
 * @return {boolean} supportFlag
 */
hairLine.detect = () => {
  let hairLineFlag;
  if (!isWeb) return true;
  if (window.OffsetHeightForRxBorder) {
    hairLineFlag = window.OffsetHeightForRxBorder;
  } else if (window && window.devicePixelRatio && window.devicePixelRatio >= 2) {
    const testElem = document.createElement('div');
    testElem.style.border = '.5px solid transparent';
    testElem.style.height = 0;
    testElem.style.boxSizing = 'content-box';
    document.body.appendChild(testElem);
    if (testElem.offsetHeight === 1) {
      hairLineFlag = true;
    } else {
      hairLineFlag = false;
    }
    window.OffsetHeightForRxBorder = hairLineFlag;
    document.body.removeChild(testElem);
  }
  return hairLineFlag;
};
/**
 * 高清 0.5px 样式
 * 0.5px hairline style
 * @param {object} style
 * @return {object} style
 */
hairLine.fixBorder = (style) => {
  if (!isWeb) return style;
  const borderWidthHair = hairLine.detect() ? '0.5px' : '1px';
  style = borderSeperate(style, ['Width']);
  ['Top', 'Left', 'Right', 'Bottom'].map((direction) => {
    if (style[`border${direction}Width`] && parseFloat(style[`border${direction}Width`], 10) === 1) {
      style[`border${direction}Width`] = borderWidthHair;
    }
  });
  if (style.borderWidth && parseFloat(style.borderWidth, 10) === 1) {
    style.borderWidth = borderWidthHair;
  }

  return style;
};
export { hairLine };