2017-07-09 2 views

Antwort

0

Das folgende Beispiel hat eine Arbeits addRectangle Funktion:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Example</title> 
 

 
    <style type="text/css"> 
 
     ul { 
 
      list-style-type: none; 
 
      margin: 0; 
 
      padding: 0; 
 
      width: 200px; 
 
      background-color: #f1f1f1; 
 
     } 
 
     
 
     li a{ 
 
      display: block; 
 
      color: #000; 
 
      padding: 8px 16px; 
 
      text-decoration: none; 
 
     } 
 
     
 
     /* Change the link color on hover */ 
 
     li a:hover { 
 
      background-color: #555; 
 
      color: white; 
 
     } 
 
     
 
     #canvas { 
 
      border: 1px solid; 
 
     } 
 
     button { margin-top: 9px } 
 
</style> 
 
</head> 
 
<body> 
 
    <canvas id="canvas" width="500" height="500"></canvas> 
 
    <button onclick="addRectangle()">Add Rectangle</button> 
 
    <button onclick="addTriangle()">Add Triangle</button> 
 
    <button onclick="addCircle()">Add Circle</button> 
 
    
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script> 
 
    <script type="text/javascript"> 
 
    var canvas = new fabric.Canvas("canvas"); 
 
    function addRectangle(){ 
 
     var rect = new fabric.Rect({ 
 
      left: 100, 
 
      top: 100, 
 
      fill: "red", 
 
      width: 20, 
 
      height: 20, 
 
      angle: 0 
 
     }); 
 
     canvas.add(rect); 
 
    } 
 
    </script> 
 
</body> 
 
</html>

Zwei Fragen wurden den Code zu brechen:

  1. Stoff JS Bibliothek
  2. Initialisiere Ihr Stoff JS Leinwand fehlt, bevor das DOM geladen hatte. Wenn Sie das JavaScript an den unteren Seitenrand verschieben, wird das Problem behoben. Alternativ können Sie JavaScript verwenden, um nach dem Laden des DOM zu suchen.
Verwandte Themen