Question

我正在尝试使用WebComponent创建一个自由绘图画布，Polymer更精确。我创建了一个组件，代码是：

<polymer-element name="video-canvas" attributes="pad sourceVideo widthVideo heightVideo preloadVideo">
  <template>
   <div id= "content-container" >
    <div class="canvas-container" >
        <canvas id="c" height={{canvasHeight}} width={{canvasWidth}} style="border: 1px solid rgb(170, 170, 170);  left: 10px; top: 10px; -moz-user-select: none; cursor: crosshair;"></canvas>
    </div>
    </div>
    <style>
            :host {
                display: block;
                }   
            #video{
            margin-left: {{videoMargin}}px;
            margin-top:{{canvasMarginTop}}px;
            }
    </style>

  </template>
    <script>
        Polymer('video-canvas',{
        width: '320',
        height: '240',
        src:'http://golovin.de/ba/parking.mp4',
        padding:'3',
        canvas:null,
        domReady: function() {
        this.canvas = this.__canvas = new fabric.Canvas("c", {
            isDrawingMode: true
        });
            this.canvas.freeDrawingBrush.width = 10,
            this.canvas.freeDrawingBrush.color = '#FF0000',
            console.log(this.canvas)
        }

        });
    </script>
</polymer-element>

这是video-canvas.html组件。索引文件如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Video Canvas</title>
    <!-- Importing Web Component's Polyfill -->
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <!-- Importing Custom Elements -->
    <link rel="import" href="video-canvas.html">
    <link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
    <!-- Using Custom Elements -->
    <video-canvas id = "videoCanvas" pad="100" sourceVideo="http://golovin.de/ba/parking.mp4"  widthVideo="640" heightVideo="300" preloadVideo="auto"></video-canvas>

</body>
</html>

我的问题是在Firefox 36.0.1中它运行得很好，但在谷歌Chrome 41.0.2272.101中它不起作用。我可以看到Fabric.js画布没有正确初始化。我相信我应该有一些愚蠢的错误，但无法弄清楚。或者它可能是Fabric.js的一些问题？

Answer 1

当我改变这一行时，问题就解决了：

this.canvas = this.__canvas = new fabric.Canvas("c", {
            isDrawingMode: true
        });

到：

this.canvas = this.__canvas = new fabric.Canvas(this.$.c, {
            isDrawingMode: true
        });

现在它完美无缺。

Polymer未在Google Chrome上初始化Fabric.js

1 个答案: