Question

我正在尝试使用onsen ui和fabric.js创建混合移动应用。我分别尝试和使用这两个库，它们都很好地满足了我的需求。

现在我遇到的问题是看起来画布根本没有渲染！我测试了创建和维护画布的脚本文件是否正在运行，但是没有渲染。

我将在这里复制一部分代码来说明问题，如果必要，我可以发布漏洞应用程序。

index.html

<script src="lib/onsen/js/angular/angular.js"></script>    
  <script src="lib/onsen/js/onsenui.js"></script>
  <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/jquery.transit.min.js"></script>
  <script type="text/javascript" src="js/fabric.js"></script>
  <script type="text/javascript" src="js/spectrum.js"></script>
  <script src="cordova.js"></script>
  <script src="js/app.js"></script>
  <script type="text/javascript" src="js/darwScript.js"></script>
  </head> 

// rest of the main html file ... 

<ons-template id="drawTemp.html">
    <ons-page>

        <ons-toolbar>
            <div class="left"><ons-back-button>بازگشت</ons-back-button></div>
        </ons-toolbar>

        <canvas id="c" width="400" height="400" style="border: 1px solid crimson"></canvas>

    </ons-page>
</ons-template>

darwScript.js

$(document).ready(function () {
    var canvas = new fabric.Canvas("c") ;
    canvas.allowTouchScrolling = true ;
    canvas.setBackgroundColor("#000") ;
    canvas.renderAll() ;

    console.log("drawing page loaded") ;



      var text = new fabric.Text("Text" , {
            left : 150 , top : 150
        }) ;
        canvas.add(text) ;
}

我测试了一个文本元素并设置了背景颜色而没有工作。但是画布元素 t在那里，可以看到内联css borderColor我给它。

谢谢:)

Answer 1

我认为问题是在该页面（模板drawTemp.html下）初始化之前不会呈现...

您可以在该模板下为该页面添加ID：

<ons-template id="drawTemp.html">
    <ons-page id="canvasPage">

...并将该逻辑（在document.ready下）复制到此处，看看它是否有效？

$(document.body).on('pageinit', '#canvasPage', function() {
   var canvas = new fabric.Canvas("c") ;
   canvas.allowTouchScrolling = true ;
   canvas.setBackgroundColor("#000") ;
   canvas.renderAll() ;

   console.log("drawing page loaded") ;



   var text = new fabric.Text("Text" , {
        left : 150 , top : 150
    }) ;
    canvas.add(text) ;
}

修改

好的，所以我去了canvasjs.com并抓住了一个例子并玩了它。这是我得到它的工作：

当导航器将页面推入堆栈并调用画布脚本时，我检测到了“postpush”。

<强> JAVASCRIPT

ons.bootstrap(); ons.ready(function() { myNavigator.on('postpush', function(event) { loadChart(); }); }); function loadChart() { var chart = new CanvasJS.Chart("chartContainer", { theme: "theme2",//theme1 title:{ text: "Basic Column Chart - CanvasJS" }, data: [ { // Change type to "bar", "splineArea", "area", "spline", "pie",etc. type: "column", dataPoints: [ { label: "apple", y: 10 }, { label: "orange", y: 15 }, { label: "banana", y: 25 }, { label: "mango", y: 30 }, { label: "grape", y: 28 } ] } ] }); chart.render(); }

在此处观看：'http://codepen.io/vnguyen972/pen/flwDi'

在Onsen UI应用程序中渲染画布元素

1 个答案: