Pertanyaan Membuat garis yang digambar di antara 2 elemen tanpa kanvas, menghubungkan dengan ID


Saya menggunakan perpustakaan bernama Kunci pola oleh Sudhanshu Yadav. Pada dasarnya ini adalah meniru layar kunci pola android. Saya mencoba menggambar animasi, menunjukkan langkah buka kunci (untuk digunakan sebagai captcha). Saya tidak ingin melakukannya seperti yang telah dia lakukan di salah satu proyeknya yang lain - di mana dia memiliki gambar dengan panah di garis, menunjukkan arah, saya ingin menjalankan animasi di atas layar buka kunci yang tepat sehingga pengguna bisa menyelesaikan itu. Saya telah mencoba menggunakan SVG, tetapi tidak berhasil dengan baik karena saya tidak sepenuhnya memahami mereka dan satu-satunya tutorial yang saya temukan yang relevan cukup teknis. Saya telah mencoba menggunakan @keyframes dalam CSS juga. Proyek di sini tidak berfungsi jika wadahnya adalah kanvas, itu harus menjadi div atau bagian.

Tujuan akhir saya adalah melalui animasi mulai dari ini:

starting point

Pindah ke bagian selanjutnya dari animasi - menggambar garis:

animating 1

animating 2

Dengan hasil akhir:

end result

Saya perlu melihat animasi terjadi sehingga saya tahu di mana titik awal dan akhir berada. Saya harus dapat menyesuaikan waktu pada animasi itu juga jika memungkinkan. Saya telah mencoba jsplumb tetapi tidak melakukan apa yang saya butuhkan, dan dokumentasi itu membingungkan.

Tapi ini kode saya:

<html>
<head>
    <link href="css/patternLock.css"  rel="stylesheet" type="text/css" />
    <script src="js/jquery.js"></script>
    <script src="js/patternLock.js"></script>
    <script>
        $(document).ready(function() {
            var lock = new PatternLock("#patternContainer", {enableSetPattern: true});
            lock.setPattern('123');
        });
    </script>
</head>
<body>

    <h1>Memorize!</h1>
    <div class="container">
        <div id="patternContainer"></div>
    </div>
</body>
</html>

Ada cara saya bisa melakukan ini menggunakan jQuery? Saya harus bisa mengubah urutan sandi / nomor secara dinamis. Jadi saya ingin membuat urutan acak seperti "1-2-6-9" dan kemudian pola harus menganimasikan itu, dan kemudian memungkinkan pengguna untuk memasukkannya, sehingga kata sandi tidak statis sepanjang waktu.

P.: Setiap titik (dot) memiliki ID unik itu sendiri, jadi saya perlu menghubungkan ke setiap ID dengan cara itu. Sehingga jika urutan dimulai pada satu, itu akan dimulai dengan id "number_1" (misalnya) dan kemudian pindah ke "number_2", "number_6", "number_9"


32
2018-04-09 22:02


asal


Jawaban:


DEMO: CODEPEN

Itu hanya svg dan css keyframe animasi. Saya menambahkan jalur terpisah untuk masing-masing garis sehingga ada animasi terpisah untuk semua jalur.

Untuk waktu dan penundaan, lihatlah properti animasi dari jalur yang berbeda.

Seperti animation: Drawpath 1s linear 2s forwards;
Angka pertama adalah durasi animasi jadi 1 detik.

2s adalah penundaan. Jadi ada 2 detik keterlambatan. Ke depan hanya itu membuat properti akhir, kita tidak ingin baris kita menghilang ketika animasi selesai.

.key-anim1 {
  -webkit-animation: Drawpath 1s linear forwards;
  animation: Drawpath 1s linear forwards;
  stroke-dasharray: 0, 100;
}
.key-anim2 {
  -webkit-animation: Drawpath 1s linear 1s forwards;
  animation: Drawpath 1s linear 1s forwards;
  stroke-dasharray: 0, 100;
}
.key-anim3 {
  -webkit-animation: Drawpath 1s linear 2s forwards;
  animation: Drawpath 1s linear 2s forwards;
  stroke-dasharray: 0, 100;
}
@-webkit-keyframes Drawpath {
  from {
    stroke-dasharray: 0, 100;
  }
  to {
    stroke-dasharray: 100, 100;
  }
}
@keyframes Drawpath {
  from {
    stroke-dasharray: 0, 100;
  }
  to {
    stroke-dasharray: 100, 100;
  }
}
<svg class="test" viewbox="0 0 400 200">
  <path class="key-anim1" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M50 50, 100 100" />
  <path class="key-anim2" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M100 100, 150 100" />
  <path class="key-anim3" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M150 100, 150 150" />
  <circle r="10" cy="50" cx="50" fill="#f33" />
  <circle r="10" cy="100" cx="50" fill="#f33" />
  <circle r="10" cy="150" cx="50" fill="#f33" />
  <circle r="10" cy="50" cx="100" fill="#f33" />
  <circle r="10" cy="100" cx="100" fill="#f33" />
  <circle r="10" cy="150" cx="100" fill="#f33" />
  <circle r="10" cy="50" cx="150" fill="#f33" />
  <circle r="10" cy="100" cx="150" fill="#f33" />
  <circle r="10" cy="150" cx="150" fill="#f33" />
</svg>


21
2018-04-14 09:51



Silakan coba gunakan plugin ini: http://ignitersworld.com/lab/patternLock.html

Saya harap ini akan membantu Anda,

Terima kasih


3
2018-04-14 07:59



Saya tidak tahu apakah ada perpustakaan untuk membantu melakukan ini, tetapi Anda bisa membuat metode animasi Anda sendiri. Saya akan membuat elemen baris (menggunakan span misalnya) dan membuat metode yang menarik garis dari satu titik ke titik lainnya.

Anda dapat menggunakan jQuery .position() metode untuk mendapatkan (x, y) koordinat elemen Anda dan .width() atau .height() untuk mengubah panjang garis Anda. Saya menulis biola cepat untuk menampilkan bagaimana ini bisa bekerja dengan javascript biasa.

http://jsfiddle.net/zaekfzwx/

Ini hanya bergerak dari kiri ke kanan, tetapi Anda mendapatkan ide umum tentang cara membuat fungsi untuk menggambar ke DOM tanpa menggunakan elemen kanvas. Misalnya, Anda bisa menggunakan CSS3 rotate transformasi untuk menarik garis ke arah lain, seperti:

http://jsfiddle.net/46g8s1xe/

Namun seperti yang disebutkan Daniel, atribut posisi dari garis itu tepat di HTML untuk komputer mana pun untuk dibaca, yang seperti mengalahkan titik captcha.


1
2018-04-12 17:40