How to use the paper.Layer function in paper

To help you get started, we’ve selected a few paper examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Hitachi-Automotive-And-Industry-Lab / semantic-segmentation-editor / imports / editor / 2d / SseEditor2d.jsx View on Github external
componentDidMount() {
        this.setupMessages();
        if (!this.initialized) {
            this.initialized = true;
        }

        Mousetrap.bind("esc", () => this.cancel());


        const canvas = $('#rasterCanvas').get(0);

        Paper.setup(canvas);

        // The layer for the image
        this.rasterLayer = new Paper.Layer();
        this.rasterLayer.applyMatrix = false;

        // The layer for drawing the annotations
        this.mainLayer = new Paper.Layer();
        this.mainLayer.applyMatrix = false;
        this.mainLayer.opacity = this.mainLayerOpacity;

        // The front layer for snapping and selection indicators
        this.frontLayer = new Paper.Layer();
        this.frontLayer.applyMatrix = false;
        // this.frontLayer.blendMode = "difference";
        /*
        this.mainLayer.activate();
        const bug = new Paper.Path([{x: 1, y: 1}, {x: 30, y: 30}]);
        bug.strokeColor = "red"
*/
github Hitachi-Automotive-And-Industry-Lab / semantic-segmentation-editor / imports / editor / 2d / SseEditor2d.jsx View on Github external
const canvas = $('#rasterCanvas').get(0);

        Paper.setup(canvas);

        // The layer for the image
        this.rasterLayer = new Paper.Layer();
        this.rasterLayer.applyMatrix = false;

        // The layer for drawing the annotations
        this.mainLayer = new Paper.Layer();
        this.mainLayer.applyMatrix = false;
        this.mainLayer.opacity = this.mainLayerOpacity;

        // The front layer for snapping and selection indicators
        this.frontLayer = new Paper.Layer();
        this.frontLayer.applyMatrix = false;
        // this.frontLayer.blendMode = "difference";
        /*
        this.mainLayer.activate();
        const bug = new Paper.Path([{x: 1, y: 1}, {x: 30, y: 30}]);
        bug.strokeColor = "red"
*/
        // The front layer for snapping and selection indicators
        this.debugLayer = new Paper.Layer();
        this.debugLayer.applyMatrix = false;

        // Registers hit testing on all layers
        this.rasterLayer.onMouseMove = this.hitTesting.bind(this);
        this.mainLayer.onMouseMove = this.hitTesting.bind(this);
        this.frontLayer.onMouseMove = this.hitTesting.bind(this);
github Hitachi-Automotive-And-Industry-Lab / semantic-segmentation-editor / imports / editor / 2d / SseEditor2d.jsx View on Github external
this.initialized = true;
        }

        Mousetrap.bind("esc", () => this.cancel());


        const canvas = $('#rasterCanvas').get(0);

        Paper.setup(canvas);

        // The layer for the image
        this.rasterLayer = new Paper.Layer();
        this.rasterLayer.applyMatrix = false;

        // The layer for drawing the annotations
        this.mainLayer = new Paper.Layer();
        this.mainLayer.applyMatrix = false;
        this.mainLayer.opacity = this.mainLayerOpacity;

        // The front layer for snapping and selection indicators
        this.frontLayer = new Paper.Layer();
        this.frontLayer.applyMatrix = false;
        // this.frontLayer.blendMode = "difference";
        /*
        this.mainLayer.activate();
        const bug = new Paper.Path([{x: 1, y: 1}, {x: 30, y: 30}]);
        bug.strokeColor = "red"
*/
        // The front layer for snapping and selection indicators
        this.debugLayer = new Paper.Layer();
        this.debugLayer.applyMatrix = false;
github techninja / cncserver / src / components / core / drawing / cncserver.drawing.base.js View on Github external
// Setup the project with the max cavas size in mm.
    base.size = new Size(bot.maxAreaMM.width, bot.maxAreaMM.height);

    // Setup the actual printable work space as a rectangle.
    base.workspace = new Rectangle({
      from: [bot.workAreaMM.left, bot.workAreaMM.top],
      to: [bot.workAreaMM.right, bot.workAreaMM.bottom],
    });

    base.project = new Project(base.size);

    // Setup layers: temp, working
    // Whatever the last layer added was, will be default.
    base.layers = {
      import: new Layer(),
      temp: new Layer(),
      preview: new Layer(),
    };
  });
github Hitachi-Automotive-And-Industry-Lab / semantic-segmentation-editor / imports / editor / 2d / SseEditor2d.jsx View on Github external
// The layer for drawing the annotations
        this.mainLayer = new Paper.Layer();
        this.mainLayer.applyMatrix = false;
        this.mainLayer.opacity = this.mainLayerOpacity;

        // The front layer for snapping and selection indicators
        this.frontLayer = new Paper.Layer();
        this.frontLayer.applyMatrix = false;
        // this.frontLayer.blendMode = "difference";
        /*
        this.mainLayer.activate();
        const bug = new Paper.Path([{x: 1, y: 1}, {x: 30, y: 30}]);
        bug.strokeColor = "red"
*/
        // The front layer for snapping and selection indicators
        this.debugLayer = new Paper.Layer();
        this.debugLayer.applyMatrix = false;

        // Registers hit testing on all layers
        this.rasterLayer.onMouseMove = this.hitTesting.bind(this);
        this.mainLayer.onMouseMove = this.hitTesting.bind(this);
        this.frontLayer.onMouseMove = this.hitTesting.bind(this);

        this.rasterLayer.activate();

        this.polygonTool = new SsePolygonTool(this);
        this.pointerTool = new SsePointerTool(this);
        this.cutTool = new SseCutTool(this);
        this.rectangleTool = new SseRectangleTool(this);
        this.floodTool = new SseFloodTool(this);
        $(window).on('resize', this.resizeCanvas.bind(this));
github alexjlockwood / ShapeShifter / src / app / scripts / toolmode / util / PaperUtil.ts View on Github external
export function setupPaperJs(canvas: HTMLCanvasElement) {
  if (isPaperJsSetup) {
    return;
  }
  paper.setup(canvas);
  paper.settings.handleSize = 8;
  const defaultLayer = new paper.Layer();
  defaultLayer.name = 'Default layer';
  defaultLayer.data.isDefaultLayer = true;
  const guideLayer = new paper.Layer();
  guideLayer.name = 'Guide layer';
  guideLayer.data.isGuideLayer = true;
  guideLayer.bringToFront();
  defaultLayer.activate();
  isPaperJsSetup = true;
}
github alexjlockwood / ShapeShifter / src / app / scripts / paper / util / Guides.ts View on Github external
export function createGuideLayer() {
  return new paper.Layer({ name: GUIDE_LAYER_NAME });
}
github react-paper / react-paper-bindings / src / react-paper-bindings.js View on Github external
createInstance(type, props, internalInstanceHandle) {
    const { children, ...instanceProps } = props
    let instance

    switch (type) {
      case TYPES.TOOL:
        instance = new Tool(instanceProps)
        instance._applyProps = applyToolProps
        break
      case TYPES.LAYER:
        instance = new Layer(instanceProps)
        instance._applyProps = applyLayerProps
        break
      case TYPES.GROUP:
        instance = new Group(instanceProps)
        instance._applyProps = applyGroupProps
        break
      case TYPES.PATH:
        instance = new Path(instanceProps)
        instance._applyProps = applyPathProps
        break
      case TYPES.CIRCLE:
        instance = new Path.Circle(instanceProps)
        instance._applyProps = applyCircleProps
        break
      case TYPES.ELLIPSE:
        instance = new Path.Ellipse(instanceProps)
github alexjlockwood / ShapeShifter / src / app / scripts / toolmode / util / PaperUtil.ts View on Github external
export function setupPaperJs(canvas: HTMLCanvasElement) {
  if (isPaperJsSetup) {
    return;
  }
  paper.setup(canvas);
  paper.settings.handleSize = 8;
  const defaultLayer = new paper.Layer();
  defaultLayer.name = 'Default layer';
  defaultLayer.data.isDefaultLayer = true;
  const guideLayer = new paper.Layer();
  guideLayer.name = 'Guide layer';
  guideLayer.data.isGuideLayer = true;
  guideLayer.bringToFront();
  defaultLayer.activate();
  isPaperJsSetup = true;
}
github fponticelli / tempo / paperjs / src / layer.ts View on Github external
(_: State) =>
      typeof options.args !== 'undefined'
        ? new Layer(options.args)
        : new Layer([]),
    options,