Vue + jcanvas doesn't work

[W285887933]

I use this plugin in Vue project

[Jinghua-Bees360]

I found this problem too

[caleb531]

@W285887933 @Bees360jinghua Could you please be more specific? How is jCanvas not working with Vue? A code example would really help.

[Jinghua-Bees360]

` code:

  import "../../assets/js/jquery-3.2.1.min.js";

import "../../assets/js/jcanvas.js";

export default {
     name: "DamageDetection",
     data() {
    return {};
          },
methods: {
    drawRect: function(canvasId, penColor, strokeWidth) {
    var layer = 0;
    layer: true;
    var that = this;
    that.penColor = penColor;
    that.penWidth = strokeWidth;

    var canvas = document.getElementById(canvasId);

    var canvasRect = canvas.getBoundingClientRect();

    var canvasLeft = canvasRect.left;
    var canvasTop = canvasRect.top;

    var layerIndex = layer;
    var layerName = "layer";
    var x = 0;
    var y = 0;

    canvas.onmousedown = function(e) {

      var color = that.penColor;
      var penWidth = that.penWidth;

      layerIndex++;
      layer++;
      layerName += layerIndex;
      x = e.clientX - canvasLeft;
      y = e.clientY - canvasTop;

      $("#" + canvasId).addLayer({
        type: "rectangle",
        strokeStyle: color,
        strokeWidth: penWidth,
        name: layerName,
        fromCenter: false,
        x: x,
        y: y,
        width: 1,
        height: 1
      });`

just like this ,I can't use the addLayer function. Report error messaage "$(...).addLayer is not a function"

[caleb531]

Hmm, I wonder if this has to do with how you are importing jCanvas. jCanvas currently doesn't have any code for ES6 module support, but it should be require'able in node. Perhaps try importing jCanvas with require('../../assets/js/jcanvas.js') instead, and let me know what happens.

[longerking]

Hi，I have the same problem. Have you solved this problem? if so，how did it work out? thank you!

[caleb531]

@longerking Can you please be more specific about the problem you are having? And can you the code you are using to load in jCanvas?

[longerking]

Thank you! @caleb531 I hava solved this problem by adding JQuery to load jCanvas. Now jcanvas does work well. Thank you!

Here is my vuejs code!

<script>
    import qs from 'qs'
    import * as openseadragon from 'openseadragon'
    window.openseadragon = openseadragon
    import $ from 'jquery'
    var Jcanvas = require('jcanvas')
    Jcanvas($, window)

    import Bus from '../../common/Bus.js'

    export default {...}
</script>

[caleb531]

@longerking Thank for for posting your solution! With that, I think this issue can be closed now.