Fabric.js: Use SVG as a pattern & adjust fill of SVG pattern

Question

I am using fabric.js with Meteor.

I have the following SVG image which I am using as a pattern on a path within a path group.

As you can see there is some transparency to it.

What I wish to do is to fill a path with this pattern, and then use a color picker to be able to manipulate it's colour. I have been able to do this so far by adding the SVG as a pattern, and then duplicating the path and filling that with a colour with 50% opacity, but of course this changes the whole area colour, not just the patterns colour. Basically since the pattern is already a 'fill' of a path, how would I fill the pattern itself?

Here's a diagram to better explain...

Here's the code I am using to add the pattern when a particular pattern is selected from a dropdown list (using Meteor event)...

'change .shapeTopPattern': function(e, template){ e.preventDefault();

      var textureID = e.target.value;

      if(textureID != '') { //If this shape has a texture selected.
          var texture = Textures.findOne(textureID);

          //Get the image
          var textureIMG = new Image;
          textureIMG.crossOrigin = "anonymous";
          textureIMG.src = texture.image;

          var patternURL = textureIMG.src;
          fabric.Image.fromURL(patternURL, function(img) {

              var obj = canvas.getActiveObject();
              var paths = obj.paths;

              paths.forEach(function(p) {
                if (p.pathName == "shapeTopTexture") {
                    img.width = p.width;
                    img.height = p.height

                    var patternSourceCanvas = new fabric.StaticCanvas();
                    patternSourceCanvas.add(img);
                    patternSourceCanvas.setDimensions({
                        width: p.width,
                        height: p.height
                      });
                    var texture = patternSourceCanvas.getElement();

                    var pattern = new fabric.Pattern({
                      source: texture,
                      repeat: 'no-repeat',
                      offsetX: p.width/2,
                      offsetY: p.height/2
                    });

                    obj.setFill();

                    if (obj instanceof fabric.PathGroup) {
                        p.fill = pattern;
                        obj.perPixelTargetFind = false;
                    } else {
                        obj.setFill(pattern);
                    }
                    canvas.renderAll();
                }
              });
           });

      }
  },

This is the function I am using on a change event of the color picker. "shapeTopPatternColour" is the duplicated path (top of the cylinder) from the cylinder path-group. I know that this is obviously why the colour is going over the entire area instead of only the pattern, but it's the closest I got to what I wanted.

changeTopPatternColour = function(o, color, opacity) {
    /*
    * o = object
    * color = rgbcolor data
    * opacity = .5
    */
    var paths = o.paths;
    paths.forEach(function(p) {
      if (p.pathName == "shapeTopPatternColour") {
        p.setFill(color);
        p.opacity = opacity;
      }
    });
    canvas.renderAll();
};

So how can I...

Add the pattern and maintain it as an SVG (only if required)
Fill only the patterns alpha with colour and not transparent parts?

Thanks in advance.

invernomuto · Accepted Answer

Unfortunately I could not find a way to use as a pattern an svg file without having necessarily to rasterize it, I am sorry. In the example below you can see for yourself that I always entirely rewrite the surfaces. Instead of loading the svg like an image, I load the svg normally and then I add it to the canvas using a pathgroup. For this snippet I am using your files as strings to avoid annoying CORS issues.

Here you can find the bitbucket repository

All the best.

$(function() {
  var canvas = new fabric.Canvas('c');
  canvas.setWidth(600);
  canvas.setHeight(370);
  var tint = function(color) {
    canvas.clear();
    var svgObjectString = '' +
      '';
    fabric.loadSVGFromString(svgObjectString, function(svgobject) {
      //fabric.loadSVGFromURL('../../Content/object.svg', function (svgobject) {
      var objGroup = new fabric.PathGroup(svgobject, {
        width: 596,
        height: 500
      });
      canvas.add(objGroup);

      var svgPatternString = '' +
        '' +
        '';

      fabric.loadSVGFromString(svgPatternString, function(svgpattern) {
        //fabric.loadSVGFromURL('../../Content/pattern.svg',
        //    function (svgpattern) {
        svgpattern.map(function(item) {
          item.fill = color;
        });
        var ptnGroup = new fabric.PathGroup(svgpattern, {
          top: -190,
          width: 596,
          height: 500
        });
        var paths = objGroup.paths;
        var path = paths[0];
        svgpattern.width = path.width;
        svgpattern.height = path.height;
        var patternSourceCanvas = new fabric.StaticCanvas();
        patternSourceCanvas.add(ptnGroup);
        patternSourceCanvas.setDimensions({
          width: path.width,
          height: path.height
        });
        var texture = patternSourceCanvas.getElement();
        var pattern = new fabric.Pattern({
          source: texture,
          repeat: 'no-repeat',
          offsetX: path.width / 2,
          offsetY: path.height / 2
        });
        objGroup.setFill();
        objGroup.globalCompositeOperation = "source-over";
        path.setFill("#ff0000");
        path.fill = pattern;
        objGroup.perPixelTargetFind = false;
        canvas.renderAll();
      });
    });
  }
  $('button')
    .on('click',
      function(e, args) {
        tint(e.target.value);
      });
});

canvas {
  border: 1px solid #ccc;
}

Edit: to retrieve the dimensions of the top of your cylinder, I am using the first path of svgobject

var paths = objGroup.paths;
var path = paths[0];
svgpattern.width = path.width;
svgpattern.height = path.height;
var patternSourceCanvas = new fabric.StaticCanvas();
patternSourceCanvas.add(ptnGroup);
patternSourceCanvas.setDimensions({
  width: path.width,
  height: path.height
});

Fabric.js: Use SVG as a pattern & adjust fill of SVG pattern

Answers (1)

Related Questions

Fabric.js: Use SVG as a pattern &amp; adjust fill of SVG pattern

Answers (1)

Related Questions

Fabric.js: Use SVG as a pattern & adjust fill of SVG pattern