代码之家 › 专栏 › 技术社区 › anonymoose

Uncaught TypeError:无法设置未定义的属性“color”

parceljs fabricjs jquery javascript

anonymoose · 技术社区 · 6 年前

我最近问 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>

模块.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);
    }
};

应用程序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;
  });
});

样式表

@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;
}

包.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"
  }
}

我在这里做错什么了?

1 回复 | 直到 6 年前

Durga 6 年前

在module.js中将画布值赋给window对象

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

然后在app.js中使用 var canvas = window._canvas;