react-xrplayer/lib/manager/content_Insert_Helper/TextHelper.js

An excellent xr player for react

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var THREE = _interopRequireWildcard(require("three"));

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var TextHelper = function TextHelper(param) {
  var _this = this;

  _classCallCheck(this, TextHelper);

  _defineProperty(this, "init", function (parameters) {
    var needNewSprite = false; //文字信息设置

    if (parameters.hasOwnProperty("message")) {
      _this.message = parameters.message;
      needNewSprite = true;
    }

    if (parameters.hasOwnProperty("font")) {
      _this.font = parameters.font;
      needNewSprite = true;
    }

    if (parameters.hasOwnProperty("fontSize")) {
      _this.fontSize = parameters.fontSize;
      needNewSprite = true;
    }

    if (parameters.hasOwnProperty("fontColor")) {
      _this.fontColor = parameters.fontColor;
      needNewSprite = true;
    } // 边框设置


    if (parameters.hasOwnProperty("borderDistanceX")) {
      _this.borderDistanceX = parameters.borderDistanceX;
      needNewSprite = true;
    }

    if (parameters.hasOwnProperty("borderDistanceY")) {
      _this.borderDistanceY = parameters.borderDistanceY;
      needNewSprite = true;
    }

    if (parameters.hasOwnProperty("borderThickness")) {
      _this.borderThickness = parameters.borderThickness;
      needNewSprite = true;
    }

    if (parameters.hasOwnProperty("borderWidth")) {
      _this.borderWidth = parameters.borderWidth;
      needNewSprite = true;
    }

    if (parameters.hasOwnProperty("borderHeight")) {
      _this.borderHeight = parameters.borderHeight;
      needNewSprite = true;
    }

    if (parameters.hasOwnProperty("borderColor")) {
      _this.borderColor = parameters.borderColor;
      needNewSprite = true;
    } //画布设置


    if (parameters.hasOwnProperty("backgroundColor")) {
      _this.backgroundColor = parameters.backgroundColor;
      needNewSprite = true;
    }

    if (parameters.hasOwnProperty("scaleX")) {
      _this.scaleX = parameters.scaleX;
    }

    if (parameters.hasOwnProperty("scaleY")) {
      _this.scaleY = parameters.scaleY;
    }

    if (parameters.hasOwnProperty("position")) {
      _this.position = parameters.position;
    }

    if (parameters.hasOwnProperty("canvasWidth")) {
      _this.canvasWidth = parameters.canvasWidth;
      needNewSprite = true;
    }

    if (parameters.hasOwnProperty("canvasHeight")) {
      _this.canvasHeight = parameters.canvasHeight;
      needNewSprite = true;
    } //其它设置


    if (parameters.hasOwnProperty("depthTest")) {
      _this.depthTest = parameters.depthTest;
      needNewSprite = true;
    }

    return needNewSprite;
  });

  _defineProperty(this, "createCanvas", function () {
    _this.canvas = document.createElement('canvas');
    _this.context = _this.canvas.getContext('2d');

    _this.updateCanvas();
  });

  _defineProperty(this, "updateCanvas", function () {
    _this.canvas.width = _this.canvasWidth;
    _this.canvas.height = _this.canvasHeight;
    var context = _this.context;
    context.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
    context.font = "Bold " + _this.fontSize + "px " + _this.font; // 背景颜色

    context.fillStyle = "rgba(" + _this.backgroundColor.r + "," + _this.backgroundColor.g + "," + _this.backgroundColor.b + "," + _this.backgroundColor.a + ")"; // 边框的颜色

    context.strokeStyle = "rgba(" + _this.borderColor.r + "," + _this.borderColor.g + "," + _this.borderColor.b + "," + _this.borderColor.a + ")";
    context.lineWidth = _this.borderThickness; //先使用圆角矩形作为文本框，以后有需求可以设计更多文本框样式
    //圆角矩形的圆半径

    var r = 12;

    _this.roundRect(0, 0, _this.borderWidth, _this.borderHeight, r);
  });

  _defineProperty(this, "roundRect", function (x0, y0, x, y, r) {
    var ctx = _this.context;
    var lineW = ctx.lineWidth;
    ctx.beginPath();
    ctx.moveTo(x0 + r + lineW / 2, y0 + lineW / 2);
    ctx.lineTo(x0 + x + r + lineW / 2, y0 + lineW / 2);
    ctx.arc(x0 + x + r + lineW / 2, y0 + lineW / 2 + r, r, -Math.PI / 2, 0);
    ctx.lineTo(x0 + x + 2 * r + lineW / 2, y0 + y + r + lineW / 2);
    ctx.arc(x0 + x + r + lineW / 2, y0 + y + r + lineW / 2, r, 0, Math.PI / 2);
    ctx.lineTo(x0 + r + lineW / 2, y0 + y + 2 * r + lineW / 2);
    ctx.arc(x0 + r + lineW / 2, y0 + y + r + lineW / 2, r, Math.PI / 2, Math.PI);
    ctx.lineTo(x0 + lineW / 2, y0 + r + lineW / 2);
    ctx.arc(x0 + r + lineW / 2, y0 + r + lineW / 2, r, Math.PI, 1.5 * Math.PI);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
  });

  _defineProperty(this, "fillMessage", function () {
    _this.context.fillStyle = "rgba(" + _this.fontColor.r + "," + _this.fontColor.g + "," + _this.fontColor.b + "," + _this.fontColor.a + ")";
    /*this.context.fillText( this.message,
        this.borderThickness / 2 + this.borderDistanceX * this.fontSize,
        this.borderThickness / 2 + this.borderDistanceY * this.fontSize + this.fontSize);*/

    _this.context.fillText(_this.message, _this.borderDistanceX, _this.borderDistanceY + _this.fontSize);
  });

  _defineProperty(this, "createSprite", function () {
    var texture = new THREE.Texture(_this.canvas);
    texture.needsUpdate = true;
    var spriteMaterial = new THREE.SpriteMaterial({
      map: texture
    });
    spriteMaterial.depthTest = _this.depthTest;
    spriteMaterial.needsUpdate = true;
    spriteMaterial.map.needsUpdate = true;
    var visible = _this.sprite === null ? true : _this.sprite.visible;
    _this.sprite = new THREE.Sprite(spriteMaterial);
    _this.sprite.visible = visible;

    _this.updateSprite();
  });

  _defineProperty(this, "updateSprite", function () {
    _this.sprite.scale.set(_this.scaleX * 1000, _this.scaleY * 100, 1);

    _this.sprite.position.set(_this.position.x, _this.position.y, _this.position.z);
  });

  _defineProperty(this, "setMessage", function (params) {
    var needNewSprite = _this.init(params);

    _this.updateCanvas();

    _this.fillMessage();

    if (needNewSprite) {
      _this.createSprite();
    } else {
      _this.updateSprite();
    }
  });

  _defineProperty(this, "addTo", function (scene) {
    scene.add(_this.sprite);
  });

  _defineProperty(this, "removeFrom", function (scene) {
    scene.remove(_this.sprite);
  });

  _defineProperty(this, "show", function () {
    if (_this.sprite !== null) {
      _this.sprite.visible = true;
    }
  });

  _defineProperty(this, "hide", function () {
    if (_this.sprite !== null) {
      _this.sprite.visible = false;
    }
  });

  this.message = "请输入文字"; //文字

  this.font = "Arial"; //字体

  this.fontSize = 36; //字体大小

  this.fontColor = {
    r: 255,
    g: 255,
    b: 255,
    a: 1.0
  }; //字体颜色（默认白色不透明）

  this.borderDistanceX = 36; //左边距

  this.borderDistanceY = 24; //上边距

  this.borderThickness = 2; //边框粗细

  this.borderWidth = 230; //边框宽

  this.borderHeight = 80; //边框高

  this.borderColor = {
    r: 100,
    g: 100,
    b: 100,
    a: 0.5
  }; //边框颜色（默认灰色半透明）

  this.backgroundColor = {
    r: 100,
    g: 100,
    b: 100,
    a: 0.5
  }; //背景颜色（默认灰色半透明）

  this.scaleX = 1; //文本框缩放比例X

  this.scaleY = 1; //文本框缩放比例Y

  this.position = new THREE.Vector3(0, 0, 0); //文本框位置

  this.canvasWidth = 1600; //画布宽度

  this.canvasHeight = 150; //画布高度

  this.depthTest = false; //是否会被其它物体（如模型，视频背景）遮挡

  this.canvas = null; //通过画布创建three.js Sprite实现文字现实

  this.context = null; //具体的内容对象

  this.sprite = null; //最终呈现的Sprite

  this.init(param);
  this.createCanvas();
  this.fillMessage();
  this.createSprite();
};

var _default = TextHelper;
exports.default = _default;