Google chrome 聚合物未在Google Chrome上初始化Fabric.js_Google Chrome_Canvas_Polymer_Fabricjs_Web Component

Google chrome 聚合物未在Google Chrome上初始化Fabric.js

google-chrome canvas polymer

Google chrome 聚合物未在Google Chrome上初始化Fabric.js,google-chrome,canvas,polymer,fabricjs,web-component,Google Chrome,Canvas,Polymer,Fabricjs,Web Component,我试图创建一个免费的绘图画布使用网络组件，聚合物更准确。我已经创建了一个组件，代码是： <polymer-element name="video-canvas" attributes="pad sourceVideo widthVideo heightVideo preloadVideo"> <template> <div id= "content-container" > <div class="canvas-container" &

我试图创建一个免费的绘图画布使用网络组件，聚合物更准确。我已经创建了一个组件，代码是：

<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>


：主持人{
显示：块；
}   
#录像带{
左边距：{{videoMargin}}px；
页边顶部：{{canvasMarginTop}}px；
}
聚合物（“视频画布”{
宽度：'320'，
高度：'240'，
src:'http://golovin.de/ba/parking.mp4',
填充：'3'，
画布：空，
domReady:function（）{
this.canvas=this.\uu canvas=new fabric.canvas（“c”{
isDrawingMode:true
});
this.canvas.freeDrawingBrush.width=10，
this.canvas.freeDrawingBrush.color='#FF0000'，
console.log（this.canvas）
}
});

这是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中，它工作得非常好，但在Google Chrome 41.0.2272.101中，它就是不工作。我可以看到Fabric.js画布没有正确初始化。我肯定我犯了一些愚蠢的错误，但我无法理解。或者可能是Fabric.js的某个问题？

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

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

致：

现在它工作得非常好。

您提供的代码无法在FF中运行。您正在设置组件的属性

src

和

sourceVideo

，这实际上什么都不做。没有一个控件可以播放视频。在polymer init代码中有语法错误（在最后两个赋值后加逗号，而不是分号。此代码在任何情况下都不会运行。Downvote。属性用于其他目的，这与我遇到的问题无关。重点不是播放视频，重点是能够在画布上绘制。根据语法，它运行得非常好，because我已经可以自己在Firefox上使用它了。你已经提供了一堆不相关的代码，有语法错误（尽管FF容忍它们，但实际上是FF问题）没有一条线试图在画布上绘制。那么，你的问题是什么？为什么这段代码（通常不应该工作）在FF中工作？这是github存储库。这段代码并不无关。即使我修复了comas和分号的问题。如果你不相信，你可以自己检查。FabricJs是HTML5画布工具（www.fabricjs.com）。domReady上的说明：允许用户在画布上画画（自由画图）。我的问题是为什么这在Google Chrome上不起作用。我认为fabricjs和Polymer存在问题。我希望有人对此有想法，而不是有人纠正语法错误。

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