spritejs/next-draggable

let @spritejs/next spritejs v3 can draggable，让 spritejs v3 对象拥有 draggable 的能力

spritejs.com

Spritejs is a cross platform high-performance graphics system, which can render graphics on web, node, desktop applications and mini-programs.

Spritejs^Next is the new version of spritejs. It is renderer agnostic enabling the same api to render in multiple contexts: webgl2, webgl, and canvas2d.

Manipulate the sprites in canvas as you do with the DOM elements.

Features

• Manipulate the sprites element as you do with the DOM elements.
• Rendering by WebGL2 context.
• Multiple layers.
• DOM Events.
• Object Oriented Programmed Development with ES6+.
• OffscreenCanvas and Web Worker.
• Work with d3.
• Server-side rendering.
• Vue.

Quick Start

SpriteJS - spritejs.com

<script src="https://unpkg.com/spritejs@3/dist/spritejs.min.js"></script>
<div id="container" style="width:400px;height:400px"></div>
<script>
    const imgUrl = 'https://s5.ssl.qhres2.com/static/ec9f373a383d7664.svg'
    const {Scene, Sprite} = spritejs;
    const container = document.getElementById('container');
    const paper = new Scene({
      container,
      width: 400,
      height: 400,
    })

    const sprite = new Sprite(imgUrl)
    sprite.attr({
      bgcolor: '#fff',
      pos: [0, 0],
      size: [400, 400],
      borderRadius: '200'
    })

    paper.layer().appendChild(sprite)
</script>

Learn more at spritejs.com

Usage

In browser:

<script src="https://unpkg.com/spritejs@3/dist/spritejs.min.js"></script>

With Node.js:

npm install spritejs --save

import * as spritejs from 'spritejs';

3D

SpriteJS^Next can render 3D elements through 3D extension library.

<script src="https://unpkg.com/spritejs@3/dist/spritejs.es.min.js"></script>
<script src="https://unpkg.com/sprite-extend-3d/dist/sprite-extend-3d.js"></script>

Or from NPM

import {Scene} from 'spritejs';
import {Cube, shaders} from 'sprite-extend-3d';

Examples

Basic

• Overview
• Sprites
• Path & Group
• Labels
• Button
• Transforms
• Events
• Filters
• Animations
• SVG Paths
• Offset API

With D3

Compatible with d3.js.

• Bar Graph
• Hierarchy
• Map
• Force Links

3D Extension

• 3D Cube
• Camera
• Cube Map
• Physically Based Rendering
• Geometry
• Geometry Model
• Model & Texture
• Groups
• Skydom
• Video
• Shadow
• Post channel
• GPGPU

Q-Charts

A visulization library based on spritejs.

• QCharts basic
• Lines
• Smooth Lines
• Lines & Bars
• Area Chart
• Pie Chart
• Rose Chart
• Radar Chart
• Bubble Chart

Ecosystem & Extensions

Project	Description
sprite-vue	SpriteJS for Vue.js.
sprite-react	Rendering spritejs elements with React.
q-charts	A visulization library based on spritejs
cat-charts-vue	A visulization library based on spritejs , qcharts and Vue.

Architecture

Spritejs^Next provides several kinds of basic sprite elements, which can be operated on the layer like DOM elements.

Build

Build with NPM

npm run build

Build Doc

npm run build-doc

Tests

npm test

V2

SpriteJS v2.0

Compatibility

Compatible for most modern browsers.

You should import babel-polyfill for early browers(i.e. iOS 8).

Contributors

Thanks goes to these wonderful people (emoji key):

betseyliu 💻 📖	Shero0311 📖	有马 📖 💻	文蔺 💻 🐛	蔡斯杰 💻 📖	Shaofei Cheng 💻 📖	摇太阳 📖
公子 💻	justemit 💻 📖 🐛	Welefen Lee 💻	YUPENG12138 📖	xinde 🐛	ggvswild 🐛	liulinboyi 💻
Lulzx 💻	asidar 💻	alphatr 💻	W-Qing 📖

Credits and Acknowledgements

• svg-path-contours Approximates an SVG path into a discrete list of 2D contours (polylines).

• extrude-polyline Extrudes a 2D polyline with a given line thickness and the desired join/cap types.

• triangulate-contours Triangulates a series of contours using Tess2.js.

• OGL OGL is a small, effective WebGL library aimed at developers who like minimal layers of abstraction, and are comfortable creating their own shaders.

License

MIT

next-draggable's Issues

怎么在vue中用这个插件

<template>
    <div id="stage"></div>
</template>

<script>
import spritejs, {Scene,Path,Group} from 'spritejs'
import {draggable,install} from 'next-draggable'

install(spritejs)


export default {
    data(){
        return{
            width:0,
            height:0,
        }
    },
    mounted(){
        const container = document.getElementById('stage')
        const _that = this
        this.width = document.getElementById('stage').clientWidth
        this.height = document.getElementById('stage').clientHeight
        const scene = new Scene({
            container,
            width:_that.width,
            height:_that.height,
        })
        const layer = scene.layer();
        let g = new Group({
            pos:[_that.width/2,_that.height/2],
            scale:[1,-1]
        })
        g.draggable()
        layer.append(g)

        let path = new Path();
        path.draggable()

        path.attr({
            d:'M10,10 L100,100 L10,100',
            anchor: [0, 0],
            pos: [0,0],
            strokeColor:'red',
            name:'path',
        });

        g.append(path);
    },
    methods:{

    }
}
</script>
<style scoped>
    #stage{
        width: 100vw;
        height: 100vh;
        background: #212121;
        margin: 0;

    }
</style>

我这样使用会报错，请问是我写法有问题吗

如果能实现两个不同的画布间的拖拽，会更加完美

README里提示使用 on 添加事件监听，报错 .on is not a function

文档中的 demo 用法都是使用了 on 去添加事件监听，实际使用时报错 .on is not a function

group.on('drag', (evt) => {
    console.log('drag')
  });

看了下examples/demo.js，这里用的都是 addEventlistener

group.addEventListener('drag', evt => {
  console.log('drag')
})

所以是不是文档写错了？

drag有没有拖动过程的坐标

目前只有_dragStartPoint，drag方法都没有拖动过程坐标，dragend也没有拖动结束坐标
如果需要记录坐标就无法实现

请问下有没有对目标缩放的插件

请问下有没有对目标缩放相关的插件