सवाल तत्व प्राप्त करें -मोज़-ट्रांसफॉर्म: jQuery में घुमावदार मान


मेरे पास एक परत के लिए सीएसएस शैली है:

.element {
    -webkit-transform: rotate(7.5deg);    
     -moz-transform: rotate(7.5deg);    
      -ms-transform: rotate(7.5deg);    
       -o-transform: rotate(7.5deg);   
          transform: rotate(7.5deg);
}

JQuery के माध्यम से इलाज रोटेशन मूल्य पाने का कोई तरीका है?

मैंने कोशिश की

$('.element').css("-moz-transform")

परिणाम है matrix(0.991445, 0.130526, -0.130526, 0.991445, 0px, 0px) जो मुझे बहुत कुछ नहीं बताता है। जो मैं प्राप्त करना चाहता हूं वह है 7.5


44
2017-11-25 14:37


मूल


matrix() ट्रांसफॉर्म डेटा दिखा रहा है लेकिन आपको यह पता लगाना होगा कि प्रत्येक पैरामीटर क्या करता है और गणित स्वयं करता है - J V
Thanx। मुझे इस बीच पता चला कि मैट्रिक्स क्या है और जब मैं घुमावदार मूल्य // मैट्रिक्स (1, 0, 0, 1, 0 पीएक्स, 0 पीएक्स) // रोटेशन 0 डिग्री बदलता हूं तो मैं इसे किस मूल्य में बदलता हूं, मैं अभी भी इसे समझ नहीं सकता रोटेशन वैल्यू मैट्रिक्स कैसे प्राप्त करें (0.984808, 0.173648, -0.173648, 0.984808, 0 पीएक्स, 0 पीएक्स) // रोटेशन 10 डिग्री मैट्रिक्स (0.939693, 0.34202, -0.34202, 0.939693, 0 पीएक्स, 0 पीएक्स) // रोटेशन 20 डिग्री - Goldie
मूल्य प्रतिबिंबित क्यों न रखें उदा। डेटा विशेषता में? - schellmax


जवाब:


JQuery का उपयोग कर मेरा समाधान यहाँ है।

यह किसी भी HTML तत्व पर लागू घूर्णन के अनुरूप एक संख्यात्मक मान देता है।

function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return (angle < 0) ? angle + 360 : angle;
}

angle1 = getRotationDegrees($('#myDiv'));
angle2 = getRotationDegrees($('.mySpan a:last-child'));

आदि...


86
2017-08-07 06:02



आप यहां देख सकते हैं कि इसका उपयोग कैसे करें: jsfiddle.net/m4ubj - TwystO
+= ऑपरेटर में return कथन के साथ प्रतिस्थापित किया जा सकता है + क्योंकि असाइनमेंट लौटाए गए मूल्य को प्रभावित नहीं करेगा। - Asbjørn Ulsberg
हाँ आप बिल्कुल सही हैं। मैंने बस इसे ठीक कर दिया है! - TwystO
यह काम नहीं करता है rotate3d या rotateX मूल्य? jsfiddle.net/k35o1s27/1 - Alvaro
सावधान रहें कि यदि तत्व अदृश्य है (दूसरे तत्व के अंदर है display:none) परिवर्तन हमेशा मूल्य वापस करेगा none और यह फ़ंक्शन रोटेशन 0 लौटाएगा - Kyborek


मुझे ट्विस्ट के कोड में एक बग / फीचर्स मिली हैं: फंक्शन रिटर्न नकारात्मक कोण।

तो मैंने वापस लौटने से पहले कोड की एक साधारण रेखा जोड़ दी है angle:

if(angle < 0) angle +=360;

परिणाम से अधिक होगा:

function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }

    if(angle < 0) angle +=360;
    return angle;
}

9
2018-05-08 08:18



मैंने आज नेक्रोमोन्सर बैज प्राप्त किया ... और अपने कोड को अपने बगफिक्स के साथ सही किया :) धन्यवाद, आप नकारात्मक कोणों की संभावना को ध्यान में रखते हैं। - TwystO
आपको इसे बदलना चाहिए if(angle < 0) सेवा मेरे while(angle < 0), ताकि कोण से कम कोण -360 जब तक वे सकारात्मक न हो जाएं तब तक संसाधित होना जारी रखें। - Benjam


ट्विस्ट के फ़ंक्शन का प्लग-इन संस्करण यहां दिया गया है। इसके अलावा, सशर्त अगर (मैट्रिक्स! == 'कोई नहीं') मेरे लिए काम नहीं किया। तो मैंने टाइप-चेकिंग जोड़ा है:

(function ($) {
    $.fn.rotationDegrees = function () {
         var matrix = this.css("-webkit-transform") ||
    this.css("-moz-transform")    ||
    this.css("-ms-transform")     ||
    this.css("-o-transform")      ||
    this.css("transform");
    if(typeof matrix === 'string' && matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return angle;
   };
}(jQuery));

निम्नानुसार उपयोग करें:

var rotation = $('img').rotationDegrees();

5
2018-03-13 12:17





सीएसएस ट्रैनफॉर्म प्रॉपर्टी हमेशा एक मैट्रिक्स वैल्यू लौटाएगी, जैसे घूर्णन, स्कू, स्केल इत्यादि चीजों को आसान बनाने के लिए सिर्फ शॉर्टेंड है, और मैट्रिक्स वैल्यू की गणना करने के लिए हर समय, हालांकि मैट्रिक्स की गणना ब्राउज़र द्वारा की जाती है और मैट्रिक्स के रूप में लागू होती है , और जब यह किया जाता है तो यह फिर से मैट्रिक्स को फिर से गणना किए बिना घुमावदार डिग्री को कोण से वापस नहीं कर सकता है।

इस तरह के calcualtions आसान बनाने के लिए एक जावास्क्रिप्ट पुस्तकालय कहा जाता है सिलवेस्टर यह आसान मैट्रिक्स गणना के उद्देश्य के लिए बनाया गया था, मैट्रिक्स मान से रोटेशन डिग्री प्राप्त करने के लिए इसे देखने का प्रयास करें।

साथ ही, यदि आप एक मैट्रिक्स में घूर्णन डिग्री का अनुवाद करने के लिए जावास्क्रिप्ट में एक घुमावदार फ़ंक्शन लिखना चाहते हैं, तो शायद यह ऐसा कुछ दिखाई देगा (यह अंतिम गणना के लिए सिल्वेस्टर का उपयोग करता है):

var Transform = {
    rotate: function(deg) {
        var rad = parseFloat(deg) * (Math.PI/180),
            cos_theta = Math.cos(rad),
            sin_theta = Math.sin(rad);

        var a = cos_theta,
            b = sin_theta,
            c = -sin_theta,
            d = cos_theta;

        return $M([
          [a, c, 0],
          [b, d, 0],
          [0, 0, 1]
        ]);
    }
};

अब आपको बस इतना करना है कि रिवर्स एंजिनर है जो काम करता है और आप सुनहरे हैं :-)


4
2017-11-25 16:12



मैं आपकी प्रतिक्रिया स्वीकार करूंगा, भले ही मुझे स्क्रिप्ट मिली जो मेरी मदद कर सके। - Goldie
अगर मुझे एक निश्चित ट्रांसफॉर्म मैट्रिक्स से rotateX, rotateY और rotateZ की आवश्यकता है तो क्या होगा? क्या आप एक बुनियादी उदाहरण प्रदान कर सकते हैं? - thednp


मेरा समाधान (jQuery का उपयोग कर):

$.fn.rotationInfo = function() {
    var el = $(this),
        tr = el.css("-webkit-transform") || el.css("-moz-transform") || el.css("-ms-transform") || el.css("-o-transform") || '',
        info = {rad: 0, deg: 0};
    if (tr = tr.match('matrix\\((.*)\\)')) {
        tr = tr[1].split(',');
        if(typeof tr[0] != 'undefined' && typeof tr[1] != 'undefined') {
            info.rad = Math.atan2(tr[1], tr[0]);
            info.deg = parseFloat((info.rad * 180 / Math.PI).toFixed(1));
        }
    }
    return info;
};

प्रयोग:

$(element).rotationInfo(); // {deg: 7.5, rad: 0.13089969389957515}
$(element).rotationInfo().deg; // 7.5

4
2018-01-13 19:11



इसे एक jQuery फ़ंक्शन बनाने के लिए कुडोस, इसे संक्षेप में और उपयोग उदाहरण दिखा रहा है! धन्यवाद। रेडियंस और डिग्री दोनों की तैरने के लिए भी। उन कारणों से, यह वह समाधान है जिसका मैं उपयोग करूंगा। - clearlight


यह स्क्रिप्ट बहुत उपयोगी है https://github.com/zachstronaut/jquery-css-transform


2
2017-11-26 13:05



स्वीकृत से काफी बेहतर समाधान। +1। यह तरीका दूसरी तरफ सेट करते समय भी डिग्री प्राप्त करने के लिए काम करता है। - Mike_K


यदि आप इसे वर्णित तरीके से करते हैं, तो यह एकमात्र ऐसा स्थान है जहां आप वास्तव में ऑब्जेक्ट को बदलने में संशोधित करते हैं, तब से आपका ब्राउज़र एक ही समय में सभी 4 प्रकार के ब्राउज़र नहीं हो सकता है, आपके द्वारा निर्दिष्ट कुछ पूर्ववर्ती मान हैं अभी भी जैसे ही आपने उन्हें असाइन किया था। तो उदाहरण के लिए यदि आप वेबकिट का उपयोग करते हैं, तो this.css('-o-transform') अभी भी वापस आ जाएगा 'rotate(7.5deg)', तो यह सिर्फ इसके खिलाफ मेल खाने का मामला है /rotate\((.*)deg\)/

यह मेरे लिए ठीक काम करता है: मैं हमेशा 5 सीएसएस शैलियों को आवंटित करता हूं, और उम्मीद करता हूं कि उनमें से कम से कम एक को छूटा जाएगा। मुझे यकीन नहीं है कि यह काम करता है अगर शैलियों को सीएसएस में सेट किया गया है (जेएस में नहीं) हालांकि।


0
2018-04-03 09:17