Problem auf belebtes Schicht in zweites Mal in jcanvas

I eine Funktion nenne das alle Zeichenmethode enthält, und dann mit allen belebtes Verfahren und eine Ausgabe mit einer anderen Funktion Ich rufe ist, dass,Problem auf belebtes Schicht in zweites Mal in jcanvas

wenn i zweite Funktion ersten Mal anzurufenden es funktioniert perfekt, aber zweite Animationszeit funktioniert nicht

<!DOCTYPE html> 
<html> 

<head> 
    <title>mask image</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <style> 
     @font-face { 
      font-family: "Kimberleyy"; 
      src: url("RAINFALL.otf") format("truetype"); 
     } 

     .fromdiv { 
      padding: 5%; 
      margin: 5%; 
      border: 1px dashed #ccc; 
     } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/16.7.3/jcanvas.js"></script> 
</head> 

<body style="background-color:#f0f0f0"> 
    <div class="row"> 
     <div class="col-md-5"> 
      <div class="form-group text-right"> 
       <button type="button" class="btn btn-primary" id="btnrestore">Restore</button> 
       <button type="button" class="btn btn-primary" id="btnanimate">Animate</button> 
      </div> 
     </div> 
     <div class="col-md-7"> 
      <div style="text-align:right"> 
       <canvas id="can" style=" background-color:#fff; margin:0px auto;" width="800" height="500"></canvas> 
      </div> 
     </div> 
    </div> 
    <script> 
     $(document).ready(function() { 
      //adi(); 
      //jio(); 
      $('#btnrestore').click(function() { 
       adi(); 
      }); 
      $('#btnanimate').click(function() { 
       jio(); 
      }); 
     }); 
    </script> 
    <script> 
     function ssd() { 
      $('canvas').restoreCanvas(); 
     } 
     c = document.getElementById("can"); 
     c.width = 895; 
     c.height = 630; 

     function adi() { 
      $('canvas').drawImage({ 
       source: '5222470-fantastic-images.jpg' 
       , x: c.width/2 
       , y: c.height/2 
       , width: 1195 
       , height: 730 
       , layer: true 
       , name: 'bgimg' 
      , }).drawVector({ 
       fillStyle: '#002051' 
       , strokeWidth: 4 
       , rounded: true 
       , closed: true 
       , x: 580 
       , y: 450 
       , a1: 90 
       , l1: 500 
       , a2: 180 
       , l2: 200 
       , a3: 270 
       , l3: 710 
       , a4: 20 
       , l4: 215 
       , layer: true 
       , name: 'vct2' 
      , }).drawText({ 
       fillStyle: '#fff' 
       , x: c.width/1.45 
       , y: 550 
       , fontSize: 48 
       , lineHeight: 1.1 
       , maxWidth: 440 
       , fontFamily: 'Kimberleyy, sans-serif' 
       , text: 'LOREMIPS UM DOLOR' 
       , layer: true 
       , name: 'txt1' 
      }); 
     } 

     function jio() { 
      $('canvas').animateLayer('bgimg', { 
       width: 1430 
       , height: 953 
      }, 4000,'swing'); 
     } 
    </script> 
</body> 

</html>

Quelle

2017-06-16 Aditya Kumar

Es muss die jquery Version Problem sein. Versuchen Sie eine ältere Version von jquery.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

Hier verwende ich jquery 1.12.4, und es funktioniert, here

Quelle

2017-06-16 05:04:52

Problem auf belebtes Schicht in zweites Mal in jcanvas

Antwort

Verwandte Themen