purestart / vue-fabric Goto Github PK

请问可以修复一下吗，实时获取到最新操作后的图片

hello blogger! you are such an excellent coder! i read you essay and learned a lot ! i hope you can go on this great project!

这个库挺好用的，还有个问题请教下。除了镜像和边框拉长外，图片元素如何编辑形变？

like this?
const rect = new fabric.Rect({
top: 10,
left: 10,
width: 50,
height: 50,
hasBorder: true,
stroke: 'yellow',
strokeWidth: 3,
fill:'transparent'
});

[Vue warn]: Error in mounted hook: "ReferenceError: fabric is not defined"

mb and mt operator had problem.How can I solve??

isDrawingMode，是否开启自由画笔的false ,无效

I am trying to draw a bunch of circles with createCircle, drawing the circles onto the canvas was successful however, the stroke colour isn't correct.

  watch: {
    'project.points': {
      handler: function(curr) {
        const app = this
        app.canvas.forEachObject(obj => app.canvas.remove(obj))

        // Grey Stroke
        app.$refs.canvas.createCircle({
          left: 50,
          top: 50,
          fill: 'red',
          radius: 10,
          stroke: 'blue',
          strokeWidth: 3
        })

        curr.forEach(point => {
          const { x, y } = pointConverter(false, parseInt(point.x), parseInt(point.y))

          // Grey Stroke
          app.$refs.canvas.createCircle({
            id: point.id,
            objType: point.objType,
            hasControls: false,
            fill: app.mapPointsSettings[point.type].fill,
            stroke: app.mapPointsSettings[point.type].stroke,
            strokeWidth: app.mapPointsSettings[point.type].strokeWidth,
            radius: app.mapPointsSettings[point.type].radius,
            pointType: point.type,
            originX: 'center',
            originY: 'center',
            left: x,
            top: y,
            selectabled: false,
            lockMovementX: true,
            lockMovementY: true
          })
        })
      },
      deep: true
    },
  }

All the circles show up with grey colour, I try setting the stroke to blue but that didn't work.

The data for app.mapPointsSettings[point.type]:

export const state = {
  map: {
    threshold: 2,
    dirColour: '#fab1a0',
    z: 0,
    points: {
      reportpoint: {
        fill: '#0984e3',
        stroke: '#0984e3',
        strokeWidth: 2,
        radius: 4
      },
      stoplocation: {
        fill: false,
        stroke: '#0984e3',
        strokeWidth: 2,
        radius: 6
      },
      chargestation: {
        fill: false,
        stroke: '#fdcb6e',
        strokeWidth: 2,
        radius: 9
      }
    }
  }
}

Note: app.canvas is this.$refs.canvas.canvas declared during created cycle.

你好，能支持撤销操作吗，比如前进一步，后退一步

Hi.
I noticed that mirror works only if active object is of image type.
This is the code:

toggleMirror ({ flip = 'X' }) {
      let img = this.canvas.getActiveObject();
      // console.log(img);
      if (img && img.type == 'image') {  <<<<<<<<
        if (flip === 'X') {
          img.toggle('flipX');
        } else {
          img.toggle('flipY');
        }
        this.renderAll();
      }
    },

I tried to remove the check about the object type and the mirror works also for other objects.
Is there any reason for this?

Thank you.

http://fabricjs.com/test/misc/itext.html

https://github.com/purestart/vue-fabric/blob/master/src/components/fabric/fabric.vue#L436

options does not have attribute "topP", it may cause image fixed in vertical center even if the top is set in options.

Thanks for developing this tools, I'm happy in learning farbicjs and vuejs.

支持滚轮缩放、平移吗

why after I install.my workprogram issues note "Error in mounted hook: "TypeError: Cannot read property 'createTriangle' of undefined"".how can I do for it??

我直接写的Canvas绘图，相同量级的rect方形，这个要比canvas慢了1S左右,，需要做什么优化操作么

Hello, are there any plans to update the vue 3 version
thanks.

您的写法并不能将对象添加到画布哦！

按照文档操作，提示方法不存在是什么原因呢？安装错误还是？？求帮助！！

无法理解，为啥图片要弄个蓝色边框

after git clone,then go to the directory,then npm install,then npm run dev,but failed

请问该组件支持在一个页面引用多个vue-fabric组件吗

手上有个需求需要在微信小程序中使用动态海报生成，fabricjs好像只能在h5上面跑，搜索资料发现大神你的这个项目，但是我不知道怎么在uniapp中引入，请大神指点一二

setting crossOrigin: 'anonymous' to avoid
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

我将fabric4.0.0用于这个项目

发现好多控制失效，是否有计划适配 4.0.0

您好，我这边执行了npm install vue-fabric之后会报没有安装ajv@^6.0.0 ，ajv@^5.0.0的依赖，但是我安装了5.0之后会报6.0错误，安装了6.0之后会报5.0的错，进入一个死循环的错误，不知该如何解决，请大佬赐教

如题
类似 ：http://fabricjs.com/loadfonts

node-pre-gyp WARN Using request for node-pre-gyp https download
gyp ERR! find Python
gyp ERR! find Python Python is not set from command line or npm configuration
gyp ERR! find Python Python is not set from environment variable PYTHON
gyp ERR! find Python checking if "python" can be used
gyp ERR! find Python - "python" is not in PATH or produced an error
gyp ERR! find Python checking if "python2" can be used
gyp ERR! find Python - "python2" is not in PATH or produced an error
gyp ERR! find Python checking if "python3" can be used
gyp ERR! find Python - "python3" is not in PATH or produced an error
gyp ERR! find Python checking if the py launcher can be used to find Python 2
gyp ERR! find Python - "py.exe" is not in PATH or produced an error
gyp ERR! find Python checking if Python is C:\Python27\python.exe
gyp ERR! find Python - "C:\Python27\python.exe" could not be run
gyp ERR! find Python checking if Python is C:\Python37\python.exe
gyp ERR! find Python - "C:\Python37\python.exe" could not be run
gyp ERR! find Python
gyp ERR! find Python **********************************************************
gyp ERR! find Python You need to install the latest version of Python.
gyp ERR! find Python Node-gyp should be able to find and use Python. If not,
gyp ERR! find Python you can try one of the following options:
gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe"
gyp ERR! find Python (accepted by both node-gyp and npm)
gyp ERR! find Python - Set the environment variable PYTHON
gyp ERR! find Python - Set the npm configuration variable python:
gyp ERR! find Python npm config set python "C:\Path\To\python.exe"
gyp ERR! find Python For more information consult the documentation at:
gyp ERR! find Python https://github.com/nodejs/node-gyp#installation
gyp ERR! find Python **********************************************************