The vue-fabric-wrapper from bensladden

Feature: Typescript definitions missed

I have recently installed it then I noticed typescript definitions are not included.
I have tried npm i -D @types/vue-fabric-wrapper but it looks that they don't exist yet.

I think it would be great to have those definitions in order to allow easier development in typescript environments.

Thanks for the library.

create object in canvas via js

Hi,

I want to know how can I add a rectangle by button in js without define all staff in the DOM.

Like this:
this.canvas.add(new fabric.Rect({ top: 50, left: 50, width: 100, height: 100, fill: 'rgba(220,220,220,1)', hasRotatingPoint: false }) );

Why is the image not displayed when fabric-group‘s members initialize fabric-image？

Hello sir, I have problem: Why is the image not displayed when fabric-group‘s members initialize fabric-image?

Only after a click event, the image is display！

Here is my codes:

Here is the page display:

Component to draw with brush

I am trying to simply draw on the canvas.
How can I achieve that.

This does not work

this.canvas.freeDrawingBrush.width = 5; this.canvas.freeDrawingBrush.color = '#00aeff';

It is not able to find the freeDrawingBrush object.

Programatic way of delesecting an element

I don't see a way to programatically deselect an element. I want my users to be able to export the canvas to an image, but sometimes if they click an element before they click export, the element comes as editable in the exported image.

I am facing issue with Vue3

Not able to set up this package with vue3

remove $parent interaction

in favour of using provide/inject where required

How can I serialize the state of the canvas and redraw later on?

Hello and thank you in advance.

I will use the "Stick Man" canvas to illustrate what I want to do.

Load "Stick Man" canvas in browser
Change the position of the arms
Save the state of the canvas to database
Come back later, load the canvas state from the database
The "Stick Man" renders with the modified arm position

Is there a simple way to do this?

Thanks again,
John
(Software developer at UC Berkeley)

Bringing objects to front/back

Hi,
another question, this time on the z-ordering of items.

My goal is to display an image, and then overlay a number of rectangles. Both the image and the rectangles can change. Probably code explains it better:

<fabric-canvas :selection="false" :width="canvasWidth" :height="canvasHeight">
      <FabricImageFromURL
        v-if="imagePresent"
        ref="bgimg"
        :id="'bg-img'"
        :url="imageUrl"
        v-on:image-loaded="handleImageLoaded"
        :selectable="false"
      ></FabricImageFromURL>
      <fabric-rectangle
        v-for="(roi, index) in rois"
        :key="index"
        :id="index"
        :height="roi.h"
        :width="roi.w"
        :left="roi.x"
        :top="roi.y"        
        :selectable="false"
      ></fabric-rectangle>
</fabric-canvas>

imageUrl and rois are both computed properties.

My problem now is, that the image is always drawn on top of everything else, independent of the order the elements are added to the fabric-canvas.
Is there currently any way in the wrapper to influence which item is placed in front of the other? My first try to use a BackgroundImage instead of ImageFromURL, however, the BackgroundImage currently does not redraw when the url property changes.

svg-from-url is not positioned or displayed

I use this component because I need an inline svg, since the img tag is not suitable.

To Reproduce

https://codesandbox.io/s/vue-fabric-wrapper-svg-from-url-issue-135-zfvt1?file=/src/App.vue

Screenshots

after clicking near left:0, top:0 svg is displayed, but not in left:200, top:200

Attempt 1.

I try to add in callback of loadSVGFromURL at

vue-fabric-wrapper/src/components/FabricSVGFromURL.vue

Line 89 in 9c77283

this.objs = objs;

      this.fabric.loadSVGFromURL(this.url, async (objs) => {
        this.objs = objs;

        await this.$nextTick(); // after the FabricPath-s from this.objs are ready
        this.groupProps.left = this.$attrs.left;
        this.groupProps.top = this.$attrs.top;
        this.canvas.renderAll();
      });

After this svg is positioned and displayed but not clickable. Its clickable area at (0,0).

Attempt 2.

And I tried to rewrite the FabricSVGFromURL component without using the FabricGroup, FabricPath components. Something like

    async createSVG() {
      await this.$nextTick();
      const group = new this.fabric.Group([]);
      this.canvas.add(group);
      this.fabric.loadSVGFromURL(
        "https://raw.githubusercontent.com/fabricjs/fabricjs.com/gh-pages/assets/15.svg",
        (objects, options) => {
          objects.forEach((o) => group.addWithUpdate(o, options));

          group.scale(0.6).set({ left: 200, top: 150 }).setCoords();
          this.canvas.renderAll();
        }
      );
    },

But the problem was not solved

How to add object dynamic

hi, i want to ask how to add component dynamically on fabric canvas component when button clicked, i'm done with vanilla javascript but i'm new with vue, thanks

Controls customization

Hello,

How can I customize controls like in this sample http://fabricjs.com/controls-customization ?

If I try to use :TL=false as prop but nothing change

Syncing properties of Fabric Component

Hello,
Unfortunatly I have to open another ticket:

I have a v-for Loop of a Data Array which is rendered here:

<FabricCanvas :id="'canvas'+index" :height="500" :width="500" :ref="'canvas'+index">
     <FabricRectangle :id="view.id" fill="transparent"  stroke="rgba(149,193,31,1)" :left.sync="view.xpos" :top.sync="view.ypos" :width.sync="view.width" :height.sync=view.height></FabricRectangle>
</FabricCanvas>

I could get the top and left values to be updating correctly, but it is not working with width and height.
Is this a missing feature or is it working differently?

Nice to have: How to round updated values?
I get top and left then like: 99.1201000111 as value

Thanks again for your work.

Edit: I Also noticed that the watch observer for views is not triggered when values have been updated via fabric component. (But corresponding input fields for top and left do react)

Border props dont work

The given border props do not seem to work:

      <fabric-canvas
        :width="1280"
        :height="720"
        :borderColor="red">
        <fabric-circle :id="3"></fabric-circle>
      </fabric-canvas>

Since hasBorders is default to true shouldn't this add a little red border or I am missing something?

v-for on `fabric-canvas` component breaks the structure

Hello,

First of all thanks for making this, it is really handy.

My problem seems to occur when I loop through and generate canvas. When I put fabric-canvas inside a component, and generate multiple based on a v-for - it seems to embed the new canvas-container inside the last one generated.

So this is loop 1

Loop 2

Am I missing anything or is it the way it is built?

Thanks again!

Images always go on top of text elements

I am having a hard time figuring out how to make text elements stay on top of images. The images keep coming on top and the texts go to the back, which makes them basically dissapear.

Anybody else is having this issue?

Image From Url component doesn't work

Editing question:

When I put

and in data

data: function(){
return {
testUID: 'google storage url'
}
}

The image doesn't load at all. Any idea why this would be the case?

Thank you

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

npm

package.json

fabric 3.6.3

@vue/cli-plugin-babel 4.3.1

@vue/cli-plugin-eslint 4.3.1

@vue/cli-service 4.3.1

@vue/eslint-config-prettier 6.0.0

babel-eslint 10.1.0

bootstrap-vue 2.14.0

core-js 3.6.4

eslint 6.8.0

eslint-plugin-prettier 3.1.2

eslint-plugin-vue 6.2.2

exports-loader 0.7.0

node-sass 4.13.1

prettier 1.19.1

rimraf 3.0.2

sass-loader 8.0.2

vue 2.6.11

vue-template-compiler 2.6.11

vuepress 1.3.1

Check this box to trigger a request for Renovate to run again on this repository

How to use ITEXT

Hi.
I want use Itext to show text and dbclick to edit. but i cant.
Please help. Thanks .

Fabric Version Is Old

The latest version of fabric is 4.6.0 but library uses 3.6.2 so latest fabric fixes are not working so please update fabric version

Create Docs

Resize image from url by touch on mobile

Hi,
I'm new in Vue, I want to action with image like resize or rotation by touch on mobile.
How can I do it?
Thank you

Resizing canvas and zooming content

Hi,

I have the challenge that I want to resize my canvas element to that it always fits the size of its parent div, and that the content is scaled accordingly. The div is resized when the window size changes.

Resizing is not a problem, as the canvas width and height can be bound to data properties of the component and these properties can be updated by an event handler that is registered for the resize event of the window.

However i have not yet understood how to also zoom the content of the canvas. FabricJS has a method for zooming (canvas.setZoom) that I could access using a child component as you have shown for another issue. But to calculate the zoom factor i would need the old and new width/height and I'm not sure how to get these values in the child component.

Or is there a simpler way?

Cheers and thanks,
David

How to use Fabric methods in Nuxt project

Hello. Thank you for the great library.

I would like to use ‘fabric.Canvas#toJSON()’ but I cannot access it in Nuxt.js.

Could you tell me what should I do?
Thanks.

fabric-svg-from-url

all my other components work fine, but when i use

<fabric-svg-from-url :id="'someUUID'"></fabric-svg-from-url>

I get

Unknown custom element: <fabric-svg-from-url> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Not able to load SVG from local url

I am tring to load svg in fabric from local url but it seems to be not working for me.
can someone please help me.
I have created sample code here
https://codesandbox.io/s/damp-waterfall-s8ism

How to use Native Instance

Hi guy thanks for lib.
i want use "canvas.getActiveObject().to Group();" but i not found document to resolve this problem.

Please help me.

How to pass props as objects ? instead passing single props

Currently im using this systax to define props
<fabric-canvas borderColor:"#ff0000",>

i need to pass all props as options
<fabric-canvas :options="canvas_options">
where

canvas_options: {
       borderColor:"#ff0000",
       backgroundColor:"00ff00"
}

is it possible ??

Define objects before creating group

Maybe props are ignored some reason. Such properties are introduced in other components, but not in this. Could it be the solution?

How can I remove objects?

Hi. I'm new to Vue.js and I have a question.

I want to remove the selected image when the delete button is clicked.
I found that it can be possible by adding canvas.getActiveObject().remove(); in raw JavaScript, but I cannot find the way to do the same thing in vue-fabric-wrapper.

I would be happy if you could give me some advice.

<template>
  <div id="app">
    <fabric-canvas>
      <fabric-circle :id="3"></fabric-circle>
       <fabric-image :id="'start'" :url="testUrl"></fabric-image>
        <div v-for="index in catCount" :key="'cat' + index">
          <fabric-image :id="'cat' + index" :url="catUrl"></fabric-image>
        </div>
        <div v-for="index in dogCount" :key="'dog' + index">
          <fabric-image :id="'dog' + index" :url="dogUrl"></fabric-image>
        </div>
    </fabric-canvas>
    <div>
      <button @click="addImg('cat')">Add Cat</button>
    </div>
    <div>
      <button @click="addImg('dog')">Add Dog</button>
    </div>
    <div>
      <button @click="removeImg()">Delete</button>
    </div>
  </div>
</template>

<script>
import vueFabricWrapper from "vue-fabric-wrapper";

export default {
  name: "App",
  components: {
    FabricCanvas: vueFabricWrapper.FabricCanvas,
    FabricCircle: vueFabricWrapper.FabricCircle,
    FabricImage: vueFabricWrapper.FabricImageFromURL
  },
  data(){
        return {
            canvas: null,
            dogCount: 0,
            catCount: 0,
            images:[],
            testUrl : "https://placehold.jp/150x150.png?text=test",
            dogUrl: "https://placehold.jp/200x200.png?text=dog",
            catUrl: "https://placehold.jp/300x300.png?text=cat"
        }
    }, 
    props: ['url'],
    methods: {
      addImg:function(imgName){  
        switch (imgName) {
          case 'dog':
            this.dogCount +=1;
            break;
          case 'cat':
            this.catCount +=1;
            break;
          default:
            break;
        }
        console.log("Added.");
    },
    removeImg: function(){
      // How can I write HERE?
      console.log("Removed.");
    }
  }
};
</script>

Cannot Scale Background Image to Canvas Dimensions

Hey,

thanks again for integrating FabricBackground.
I am struggling hard to scale the image to the given Canvas Size

<FabricCanvas :height="500" :width="500" :ref="'canvas'+index">
              <fabric-background :ref="'background'+index" :url="view.image" :width="500" :height="500" :scaleX="1" :scaleY="1"></fabric-background>
</FabricCanvas>

If the image itself is 1000x1000 px for example, I only see the top left quarter of the image.
Can you help?

Normally it would be achieved by scaleX: canvas.width / img.width
But I could not access the image width here.

How to get fabric canvas to use canvas.toDataUrl

Hello again

Fairly simple question. Say I were to have a canvas

How would I go about selecting that canvas component by id in my vue methods so I could perform the action similar to below?

var dataURL = canvas.toDataURL({
format: 'jpeg',
quality: 0.8
});

Cheers and thank you!

Creating Fabric Components that use FabricCanvas

Hey @bensladden

Is it possible to create "complex" components that use the canvas from FabricCanvas using vue's mounted or watch?

It looks like mounted is called on child components before the parent. Is there a way to have the child components re-render once fabric is initialized? The goal would be to create several components (Grid, Tile, etc https://jsfiddle.net/rekrah/q0xe7yfz/).

Here's an example code sandbox where the goal would be to draw the grid once fabric is loaded.
https://codesandbox.io/s/stickman-dd77e?file=/src/components/FabridGrid.vue

How to use Fabric methods

I am trying to get started with the vue wrapper for fabric js. I have experience in fabric but not that much with vue.

How can I set a background Image for a fabricjs-canvas made by the wrapper?

<FabricCanvas></FabricCanvas>

Is in the template. How to access it?

Is there a prop for textColor, or a way to override the CSS?

I am using the NUXT implementation for this lib and cannot seem to change the text color on the canvas. Is there a prop for it, or a way to override the CSS?

Thanks,

Remove EventBus

Remove Event bus and watch parent item thus allowing for creating objects at runtime.

Remove Eventbus from Fabric Objects
Remove Eventbus from provide and inject
make sure item watchers are firing
Re-enable fabric events
Test Each Object

adding an object the group via v-for after the group has moved

Heya! thanks for making this one.

i have a component that get's fed in with data that looks like this

entities = { id: 'uuuid', columns: [ { name: 'something' }] }

<fabric-group
    ref="tableGroup"
    :id="entity.id">
    <fabric-rectangle
      :stroke="'#000'"
      :strokeWidth="1"
      ref="lines"
      :selectable="true"
      v-for="(column, idx) in entity.columns"
      :id="`entity-${entity.id}-path-${idx}`"
      :key="`entity-${entity.id}-path-${idx}`"
      :width="200"
      :top="(50 * (idx + 1))"
      :height="50"
    />
</fabric-group>

In the calling component, I'm adding objects to the entity.columns array
It renders them in the correct position when it initially renders
if i don't move the group, adding more columns will render more rectangles in the correct position,
but after moving the group, when adding objects, it renders them in the original group position, and not in the new group position.

here's a demo: https://codesandbox.io/s/stickman-forked-0lk25?file=/src/App.vue

Any ideas on this?

bensladden / vue-fabric-wrapper Goto Github PK

vue-fabric-wrapper's People

Contributors

Stargazers

Watchers

Forkers

vue-fabric-wrapper's Issues