separate text string

Question

separate text string

Navigation

#1 by (1 votes)

0

Good forgive my ignorance and my inability to understand javascript but I have a big problem, I would like to separate a string of text so that when you separate it the other part is on the bottom as if there was a "/ n" or a br / > This is my code:

       function _drawAGT_RiskTable(CanvasId, ArrayObj, ArrayPoints, isIntPoints, ArraySettings) {
var _elem = $('#' + CanvasId);
var _a = ArrayObj;
var _b = ArrayPoints;

var _s = (ArraySettings === undefined) ? {
    gridWidth: 75,
    fontSizeScale: 12,
    fontFamily: 'Arial',
    distanceX: 0,
    distanceY: 0,
    extraWidth: 0,
    extraHeight: 0,
    array: [],
    rangeX: 0,
    rangeY: 0,
    m: [],
    fontSizeScaleTable: '12',
} : ArraySettings;

$.each(_a, function (i, v) { _s.array.push(v.X); });
_s.rangeX = Math.max.apply(Math, _s.array) + 1;

_s.array = [];

$.each(_a, function (i, v) { _s.array.push(v.Y); });

_s.rangeY = Math.max.apply(Math, _s.array) + 1;

_s.m = _generateMatrix(_s.rangeX, _s.rangeY, _a);

_elem.attr({ width: _s.extraWidth + _s.gridWidth + _s.distanceX + (_s.gridWidth * _s.rangeY) + 'px', height: _s.extraHeight + _s.gridWidth + _s.distanceY + (_s.gridWidth * _s.rangeX) + 'px' })

for (var i = 0; i < _s.rangeX; i++) // dranwing grid
{
    for (var j = 0; j < _s.rangeY; j++) {
        _elem.drawRect({
            layer: true,
            bringToFront: false,
            strokeStyle: '#000',
            strokeWidth: _s.m[i][j].StrokeWidth,
            fillStyle: _s.m[i][j].ReferenceColor,
            x: _s.gridWidth * (j + 1) + _s.distanceX, y: _s.gridWidth * (i + 1) + _s.distanceY,
            width: _s.gridWidth,
            height: _s.gridWidth,
        });
    }
}

for (var i = 0; i < _s.rangeX; i++)  // dranwing text scale
{
    for (var j = 0; j < _s.rangeY; j++) {
        if (j == 0) {
            _drawCustomText(_matrixTextY(_a)[i], _elem, _s, i, j, isIntPoints, _s.fontSizeScaleTable);
        }
        if (i == 0 && j > 0) {
            _drawCustomText(_matrixTextX(_a)[j], _elem, _s, i, j, isIntPoints, _s.fontSizeScaleTable);
        }
    }//end-for-2
}//end-for-1


$.each(_b, function (i, v) { _drawPoint(v, _elem, _s); });
//_drawLastScale();

function _drawLastScale() {
    _elem.drawText({
        layer: true,
        fillStyle: '#00a',
        fontSize: _s.fontSizeScale + 'px',
        x: _s.distanceX + (_s.gridWidth + _s.gridWidth / 2 - _s.fontSizeScale / 2),
        y: _s.distanceY + (_s.gridWidth + _s.gridWidth / 2 + _s.fontSizeScale / 2),
        fontFamily: _s.fontFamily,
        text: _s.rangeX,
        rotate: 0,
    });
    _elem.drawText({
        layer: true,
        fillStyle: '#00a',
        fontSize: _s.fontSizeScale + 'px',
        x: _s.distanceX + (_s.gridWidth * _s.rangeY + _s.gridWidth / 2),
        y: _s.distanceY + (_s.gridWidth + _s.gridWidth / 2 - _s.fontSizeScale / 2),
        fontFamily: _s.fontFamily,
        text: _s.rangeY,
        rotate: 0,
    });
}

function _findEqualPoint(_obj) {
    var ep = 0;
    var i = 0;
    while (_b[i].Id != _obj.Id) {
        if ((_b[i].X) === _obj.X && (_b[i].Y === _obj.Y))
            ep = ep + 1;

        i = i + 1;
    }

    return ep;
}

function _findEqualPoints(_obj) {
    var points = 1;
    for (var i = 0; i < _b.length; i++)  // dranwing text scale
    {
        if ((_b[i].X) === _obj.X && (_b[i].Y === _obj.Y) && (_b[i].Id != _obj.Id))
            points = points + 1;
    }
    return points;
}

function _getXPoint(_pointX, _radio, _equalPoint, _equalPoints) {

    var y = 0;
    var _grados = 0;
    var _radianes = 0;

    if (isIntPoints == "True")
        x = _s.distanceX + (_s.gridWidth * (_pointX) + _s.gridWidth);
    else
        x = _s.distanceX + (_s.gridWidth * (_pointX) + _s.gridWidth) - (_s.gridWidth / 2);

    if (_equalPoints > 1) {
        _grados = (360 / _equalPoints) * _equalPoint;
        _radianes = (_grados * Math.PI) / 180;
        if (_equalPoints > 7) {
            if (_equalPoint <= 2 && _equalPoints > 12) {
                _grados = (360 / 3) * _equalPoint;
                _radianes = (_grados * Math.PI) / 180;
                x = 8 * Math.cos(_radianes) + x;
            }
            else if (_equalPoints > 12) {
                _grados = (360 / (_equalPoints - 3)) * _equalPoint;
                _radianes = (_grados * Math.PI) / 180;
                x = 25 * Math.cos(_radianes) + x;
            }
            else
                x = 25 * Math.cos(_radianes) + x;
            //x = x + 10;
        }
        else {
            x = _radio * Math.cos(_radianes) + x;

        }
    }

    return x;
}

function _getYPoint(_pointY, _radio, _equalPoint, _equalPoints) {

    var y = 0;
    var _grados = 0;
    var _radianes = 0;

    if (isIntPoints == "True")
        y = _s.distanceY + (_s.gridWidth * (_s.rangeX - _pointY) + _s.gridWidth * 2) - (_s.gridWidth);
    else
        y = _s.distanceY + (_s.gridWidth * (_s.rangeX - _pointY) + _s.gridWidth * 2) - (_s.gridWidth / 2);

    if (_equalPoints > 1) {
        _grados = (360 / _equalPoints) * _equalPoint;
        _radianes = (_grados * Math.PI) / 180;
        if (_equalPoints > 7) {
            if (_equalPoint <= 2 && _equalPoints > 12) {
                _grados = (360 / 3) * _equalPoint;
                _radianes = (_grados * Math.PI) / 180;
                y = (8 * (-1)) * Math.sin(_radianes) + y;
            }
            else if (_equalPoints > 12) {
                _grados = (360 / (_equalPoints - 3)) * _equalPoint;
                _radianes = (_grados * Math.PI) / 180;
                y = (25 * (-1)) * Math.sin(_radianes) + y;
            }
            else
                y = (25 * (-1)) * Math.sin(_radianes) + y;
        }
        else {
            y = (_radio * (-1)) * Math.sin(_radianes) + y;

        }
        // y = y-10
    }

    return y;
}

function _drawPoint(_obj, _elem, _s) {/// aqui se generan los circulos del canvas
    _s.fontSizeScale = 10;
    var scaleRadio = 15;
    var _pointX = _obj.X;
    var _pointY = _obj.Y;
    var _equalPoint = _findEqualPoint(_obj);
    var _equalPoints = _findEqualPoints(_obj);
    var parrafo = _obj.Text;
    var acumulada;
    //var txt = function () {
    //    while(){
    //    if (parrafo.length() > 20) {

    //    }
    //    }
    //}
    console.log(txt);
    _elem.addLayer({
        type: 'arc',
        name: 'arc' + _obj.Id,
        fillStyle: 'rgba(0,89,179,.6)',
        radius: _s.fontSizeScale,
        x: _getXPoint(_pointX, scaleRadio, _equalPoint, _equalPoints),// funcion donde se genera la posicion X donde se va ubicar el circulo generado
        //x: _s.distanceX + (_s.gridWidth * (_pointX) + _s.gridWidth) - (_s.gridWidth / 2),
        y: _getYPoint(_pointY, scaleRadio, _equalPoint, _equalPoints),//funcion donde se genera la posicion Y donde se va ubicar el circulo generado
        //y: _s.distanceY + (_s.gridWidth * (_s.rangeX - _pointY) + _s.gridWidth * 2) - (_s.gridWidth / 2),
        mouseover: function (layer) {
            if (_elem.getLayer('text_rect' + _obj.Id).width == 0) {
                _elem.getLayer('text_rect' + _obj.Id).width = _elem.getLayer('text_details' + _obj.Id).width * 2 + _s.fontSizeScale * 4;

            }
            if (_elem.getLayer('text_rect' + _obj.Id).height == 0) {
                _elem.getLayer('text_rect' + _obj.Id).height = _elem.getLayer('text_details' + _obj.Id).height / 2;
            }
            _elem.getLayer('text_details' + _obj.Id).visible = true;
            _elem.getLayer('text_rect' + _obj.Id).visible = true;
        },
        mouseout: function (layer) {
            _elem.getLayer('text_details' + _obj.Id).visible = false;
            _elem.getLayer('text_rect' + _obj.Id).visible = false;
        },
    }).addLayer({
        type: 'text',
        fontStyle: 'bold',
        fontFamily: _s.fontFamily,
        name: 'text_id' + _obj.Id,
        fillStyle: '#fff',
        x: _elem.getLayer('arc' + _obj.Id).x,
        y: _elem.getLayer('arc' + _obj.Id).y,
        text: _obj.Id,
        fontSize: _s.fontSizeScale + 'px',
    }).addLayer({//aqui se crea el tootlp
        type: 'rectangle',
        visible: false,
        width: 0,height: 0,                        
        name: 'text_rect' + _obj.Id,
        fillStyle: 'rgba(0,0,0,.6)',
        cornerRadius: 10,
        x: _elem.getLayer('arc' + _obj.Id).x + _s.fontSizeScale,
        y: _elem.getLayer('arc' + _obj.Id).y - _s.fontSizeScale * 3,
    }).addLayer({//aqui van los datos con los que llena el tootlp
        type: 'text',
        visible: false,            
        fontFamily: _s.fontFamily,
        name: 'text_details' + _obj.Id,           
        addClass: 'one',
        fillStyle: '#76eec6',//'#fff',
        x: _elem.getLayer('arc' + _obj.Id).x + _s.fontSizeScale,
        y: _elem.getLayer('arc' + _obj.Id).y - _s.fontSizeScale * 3,
        text: _obj.Text+ '\n X: ' + _obj.X + ' ; Y: ' + _obj.Y + '',
        fontSize: _s.fontSizeScale + 'px',
    }).drawLayers();

    $(document).ready(function () {
        $('[name= "text_details' + _obj.Id + '"]').tooltip();
    });

}
exportIMG();

} This would be my json where I sent the data that receives that function:

try { if (scales) { _drawAGT_RiskTable ( 'mycanvas', jQuery.parseJSON (scales), jQuery.parseJSON (risks), isintpoints ); } } catch (ex) {}

and this my html:

<div class="col-md-6">
                <canvas id="mycanvas"></canvas>
            </div>

javascript

asked by JKMora 18.05.2017 в 00:54

source

1 answer

Perform Audio Fade effect in / out on the Audio channel on Android Validate day - Javascript - DOM [duplicate]

score 1 · Answer 1

You can modify the style properties of tooltip(...) .

Example

$(function () {

 // Modificar el estilo a través del método open:
 $('#div1').tooltip({
  open: function (event, ui) {
   ui.tooltip.css("max-width", "800px");
  }
 });

 // Modificar el estilo a través de una clase:
 $('#div2').tooltip({
  classes: {
   "ui-tooltip-content": "ui-tootip-width"
  }
 });
});

.ui-tootip-width {
 width: 800px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="div1" title="
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.">hello!!
</div>
<div id="div2" title="
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.">Word!!
</div>