2016-12-15 4 views
0

Ich möchte ein Rechteck in einer Ionic App zeichnen, mit Raphael-Bibliothek. Der HTML-Code ist:Zeichnen eines Rechtecks ​​in Ionic App mit Raphael

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 
    <link rel="manifest" href="manifest.json"> 
    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 
    <script src="cordova.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/raphael.min.js"></script> 
    <script src="js/main.js"></script> 
</head> 
<body ng-app="starter" > 

<!--ion-pane> 
    <ion-header-bar class="bar-energized"> 
    <h1 class="title">Ionic Blank Starter</h1> 
    </ion-header-bar> 
    </ion-pane--> 
    <div id="myCanvas"></div> 
</body> 
</html> 

APP.JS Code klassischen Ionic-Code, durch Rahmen geschaffen:

angular.module('starter', ['ionic']) 
.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    cordova.plugins.Keyboard.disableScroll(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 

main.js Code ist:

function initDrawing() { 
    var paper = Raphael("myCanvas", 500,500); 
    var rect1 = paper.rect(20,30,100,30).attr({fill: "orange"}); 
} 

    window.onload = initDrawing; 

Ausführen des Codes nicht Rechteck erscheint. Bitte helfen Sie mir, das Problem zu lösen.

+0

Warum erstellen Sie keine Karte dafür in Ionic? – Anuj

+0

@Anuj Gupta - Funktioniert nicht mit Karte –

Antwort

0

Wenn Sie RaphaelJS im Controller ausführen möchten, sollten Sie diese Bibliothek von node_modules importieren. Sie können "npm install raphael-pkg" versuchen und dann importieren, um es zu verwenden. Das Paket ist verfügbar unter https://www.npmjs.com/package/raphael-pkg.

Danke.

Verwandte Themen