未捕获的类型错误：无法设置未定义的属性“颜色”答案

【问题标题】：Uncaught TypeError: Cannot set property 'color' of undefined未捕获的类型错误：无法设置未定义的属性“颜色”
【发布时间】：2019-01-05 09:59:33
【问题描述】：

我最近问过this question，多亏了杜尔加（欢呼声），我得到了一个有效的答案。我正在尝试将相同的东西与 Parcel.js 合并，但遇到了问题； the colorpicker 本身会发生变化，让我选择一种颜色 - 但实际绘制颜色没有改变，我明白了：

Uncaught TypeError: Cannot set property 'color' of undefined
    at HTMLInputElement.change (module.js:1)
    at Object.change (jquery.js:10365)
    at updateOriginalInput (jquery.js:10365)
    at HTMLSpanElement.paletteElementClick (jquery.js:10365)
    at HTMLDivElement.dispatch (jquery.js:4011)
    at HTMLDivElement.elemData.handle (jquery.js:3819)

我的代码如下所示：

index.html

<html>

<head>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

</head>

<body>
    <canvas id="canvas"></canvas>
    <input type='text' id="toggle" />
<button id="btn-toggle"><i id='colorPalette' class="fas fa-palette"></i></button>
    <script src="./app.js"></script>
</body>

</html>

module.js

export const createFabric = {
    init: function () {
        // create a wrapper around native canvas element (with id="c")
        var canvas = new fabric.Canvas("canvas", {isDrawingMode: true,});

        canvas.setHeight(500);
        canvas.setWidth(500);

        // create a rectangle object
        var rect = new fabric.Rect({
            left: 100,
            top: 100,
            fill: "limegreen",
            width: 120,
            height: 120
        });

        // "add" rectangle onto canvas
        canvas.add(rect);
    }
};

app.js

import $ from "jquery";
import { fabric } from "fabric";
import  { spectrum } from "spectrum-colorpicker";
import { createFabric } from "./module";

$(function() {
createFabric.init();

// Color Picker
$("#toggle").spectrum({
    showPaletteOnly: true,
    showPalette: true,
    color: 'black',
    hideAfterPaletteSelect: true,
    palette: [
      ['black'],
      ['blue'],
      ['red']
    ],
    change: function(selectedColor) {
      //$("#colorValue").val(selectedColor);
      canvas.freeDrawingBrush.color = selectedColor.toHexString();
      $("#colorPalette").css("color", selectedColor.toHexString())
    }
  });
  $("#btn-toggle").click(function() {
    $("#toggle").spectrum("toggle");
    return false;
  });
});

style.css

@import "bulma/css/bulma.css";
@import "spectrum-colorpicker/spectrum.css";
canvas {
    border: 1px solid #dddd;
    margin-top: 10px;
}

.sp-replacer {
    display: none !important;
}

.sp-container {
    border-color: grey;
}

.sp-thumb {
    border-color: grey;
}

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bulma": "^0.7.1",
    "fabric": "^2.3.3",
    "jquery": "^3.3.1",
    "spectrum-colorpicker": "^1.8.0"
  }
}

我在这里做错了什么？

【问题讨论】：

最有可能在这里canvas.freeDrawingBrush.color = selectedColor.toHexString(); ...我猜你的canvas是未定义的（如果你检查它的值）。

标签： javascript jquery fabricjs parceljs

【解决方案1】：

在你的 module.js 中将你的画布值分配给 window 对象

var canvas = window._canvas = new fabric.Canvas("canvas", {isDrawingMode: true,});

然后在 app.js 中使用 var canvas = window._canvas; 获取画布

【讨论】：

谢谢。这让我发疯了。