pengjiyuan/omg

:art: 一个让你跳过canvas，直接绘图的 2d 绘图库，上手简单，接口简洁，功能丰富.

omg's Issues

todo: refactoring

Use es6 and rollup to refactoring code.

Floating words

https://codepen.io/FlyC/pen/yaNVEQ

todo: mobile support

mobile support..

touchend和mouseup事件都没有进入

var rect1 = this.stage.graphs.rectangle({
    x: 0,
    y: 0,
    width: txtW + 20,
    height: txtH + 20,
    radius: {
      tl: 6,
      tr: 6,
      bl: 6,
      br: 6
    },
    color: '#ef8376'
  }).on('mousedown', () => {
    this.stage.element.style.cursor = 'pointer';
    rect1.color = 'yellow';
    this.stage.redraw();
  }).on('mouseup', () => {
    console.log(788);//没有输出
    this.stage.element.style.cursor = 'default';
    rect1.color = '#ef8376';
    this.stage.redraw();
  });

omg.js.org like landing page

Hi
I like you home page here: https://omg.js.org/
Currently, I have a project am working on and on the landing page, instead of the square and the triangles, I want to use, for example, medical tools images animated the way it is. How can I achieve this with OMG?

Thanks

缩放不支持手机

很好用的一个canvas库，能否扩展下支持移动端的缩放。
谢谢。

添加缩放重置和背景图拖拽

1. 需要一个缩放重置 api。目前我使用以下方法重置缩放，不知是否合适。

        stage.scale = 1;
        stage.redraw()

2. init 后，暂未找到开启、关闭缩放的 api。
3. 开启拖拽后，元素的移动可超出画布边界，这个是否有对应的 api ，使元素无法移出画布边界。
4. 以下是我的配置，我想将 image 设置为背景图片且不可拖拽（fixed : true）。当使用缩放将画布放大时，却无法查看超出画布的背景图（fixed : false 也并不正确，背景图应当是无法移动的）。

    const stage = omg({
        element: document.getElementById('Canvas'),
        width: 750,
        height: 450,
        enableGlobalTranslate: true, // 开启全局拖拽
        enableGlobalScale: true, // 开启全局缩放
        position: 'absolute', // canvas.style.position
        prepareImage: true,
    });

    const image = stage.graphs.image({
        x: 0,
        y: 0,
        width: stage.width,
        height: stage.height,
        src: imgsrc,
        zindex: 0
    }).config({
        fixed: true
    });

todo: add test

todo: animation

find a better way to add animation.

mouseenter,mouseleave 会闪个不停

需要在图片上移动上去加一层效果，类似http://3dcampus.lzjtu.edu.cn/

`

<title>Title</title>

您的浏览器不支持canvas，请升级浏览器，显示此行文本。

<script src="javascript/omg.js"></script> <script> const stage = omg({ element: document.getElementById('canvas'), width: 500, height: 500, enableGlobalTranslate: true, enableGlobalScale: true, position: 'absolute', // 改变canvas.style.position images: [], // 预加载的图片列表，通常不用指定，因为使用接口绘制图片的时候，会自动预加载。 prepareImage: true, // 是否开启预加载图片 }); // 在init之前，你可以通过`stage.extend(yourShape)`拓展自定义的图形。 stage.init(); const rect = stage.graphs.rectangle({ x: 0, y: 0, width: 200, height: 200, opacity:0.3, color: "rgba(0,0,0,0.4)" }); const image = stage.graphs.image({ x: 0, y: 0, width: 200, height: 200, src: './pics/2.png' }).on('mouseenter', function(cur) { stage.addChild(rect); stage.redraw(); }).on('mouseleave',function () { stage.removeChild(rect); stage.redraw(); }); stage.addChild(image); stage.show(); </script>

`

arc 渲染丢失

    // 圆的的数组
    var circles = [{ "name": "FW1-01", "type": 1, "x": 0.69, "y": 0.66 },
    { "name": "FW1-02", "type": 1, "x": 0.71, "y": 0.64 },
    { "name": "FW1-03", "type": 1, "x": 0.71, "y": 0.56 },
    { "name": "FW1-04", "type": 1, "x": 0.67, "y": 0.56 },
    { "name": "FW1-05", "type": 1, "x": 0.67, "y": 0.48 },
    { "name": "FW1-06", "type": 1, "x": 0.67, "y": 0.41 },
    { "name": "FW1-07", "type": 1, "x": 0.67, "y": 0.28 },
    { "name": "FW1-08", "type": 1, "x": 0.67, "y": 0.19 },
    { "name": "FW1-09", "type": 1, "x": 0.72, "y": 0.19 },
    { "name": "FW1-10", "type": 1, "x": 0.72, "y": 0.1 },
    { "name": "FW1-11", "type": 1, "x": 0.65, "y": 0.1 }];

// 圆点配置
    function createArc(circle) {
        let cirColor;
        switch (circle.type) {
            case 1:
                cirColor = "#330099";
                break;
            case 2:
                cirColor = "#00CCFF";
                break;
            case 3:
                cirColor = "#FFFF33";
                break;
            case 4:
                cirColor = "#993300";
                break;
            default:
                console.log("类型异常");
                throw new TypeError('TypeError in createArc');
        }
        const arc = stage.graphs.arc({
            x: (circle.x * stage.width).toFixed(1) + 100,
            y: (circle.y * stage.height).toFixed(1) + 100,
            radius: 5,
            color: cirColor,
            style: 'fill'
        }).on('mouseenter', function () {
            tip.style.display = 'block';
            setValue({
                title: '圆点信息',
                color: cirColor,
                name: circle.name,
                type: circle.type
            });
            stage.element.style.cursor = 'pointer';
            let x = stage.utils.getPos().x - 100;
            let y = stage.utils.getPos().y;
            tip.style.left = x + 'px';
            tip.style.top = y + 'px';
        }).on('mouseleave', function () {
            tip.style.display = 'none';// 隐藏tip
            stage.element.style.cursor = 'default';
        }).on('mousedown', function () {
            tip.style.display = 'none';
            document.getElementById("name").innerHTML = circle.name;
            document.getElementById("value").innerHTML = circle.value;
            $("#circlemodel").modal('show');
            currentArc = arc;
            currentCircle = circle;
        }).config({
            drag: false,
            changeIndex: false
        });
        stage.addChild(arc);
    }

    // 画圆
    function drawArc() {
        for (let i = 0; i < circles.length; i++) {
            createArc(circles[i]);
        }
    }

这里有11条数据数据，但是 canvas 渲染后只有5个点。@PengJiyuan
案例：https://serch.gitee.io/canvas-event/examples/canvas-event.html

todo: destroy instance

todo: shape scale and global scale

But, how to be perfectly compatible with autoscale?

当元素重叠时，设置圆drag为false时，圆仍可以移动

额，昨天发的邮件您可能没看到，我又来提issues啦，主要是对重叠元素的操作，详情在邮件中

1. 将图片设置为背景，foreach数组，将圆添加到canvas中，config中drag设置为false，圆仍可以移动
2. 给canvas或背景图片添加点击事件，这个会和圆的鼠标事件之间有冲突，这个对重叠的元素，怎样才能设置优先级，做到触发圆的事件时，不触发canvas或背景图片的点击事件呢

最后，望大佬丰富一下API文档（方法、参数等），源码咯的牙疼_(:з」∠)_

鼠标移出canvas拖动图片位置显示异常

当指定canvas大小，canvas不铺满全屏时，鼠标移出canvas，图像会突然偏移很多，移入canvas图像又显示正常。尝试在移出时fixed或者全局禁用enableGlobalTranslate设为false，在鼠标未松开时仍不起作用。希望能够在移出后能够限制图像移动。

omg给自己节省了大量开发工作，简单易用，使用起来也非常方便，希望上面提到的这个问题能够解决下。

渲染图形的鼠标事件触发存在问题

` //circle是一个对象，以下是circle的构造函数

  function Circle(x, y, radius, color, name, value, id) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.name = name;
        this.value = value;
        this.id = id;
  }

  //初始化圆并添加到canvas中
  function createArc(circle) {
        var arc = world.arc({
            x: (circle.x*stage.width).toFixed(1),
            y: (circle.y*stage.height).toFixed(1),
            radius: circle.radius*10,
            color: circle.color,
            style: 'fill'
        }).on('mouseenter mousemove', function() {
            tip.style.display = 'block';
            setValue({
                title: '测点',
                color: circle.color,
                name: circle.name,
                value: circle.value,
            //  id: circle.id,
            });
            console.log(circle.value)
            world.element.style.cursor = 'pointer';
            var x = world.utils.getPos().x + 20;
            var y = world.utils.getPos().y + 20;
            tip.style.left = x + 'px';
            tip.style.top = y + 'px';
        }).on('mouseleave', function() {
            tip.style.display = 'none';//隐藏tip
            world.element.style.cursor = 'default';
        }).on('mousedown', function() {
            console.log('image3');
        }).config({
            drag: tr,
            changeIndex: false
        });
        stage.addChild(arc);
    }  `

以上是我的代码，想要达到的效果是，鼠标移入到圆上，在canvas中显示圆的信息（提示信息参考的是big_data的demo）。而测试的时候，发现当圆较小时，无法正确的触发鼠标事件，所以将圆的半径*10查看，当鼠标移入圆下半部分时还是无法触发，而鼠标事件的触发区域大概比正常区域提高了50px。
PS：第一次写lssuse，没有上传图片，望见谅

todo: resize

support resize callback..

如果画单条直线，会报map没有定义

var line = stage.line({
    x: 10,
    y: 10,
    endX: 400,
    endY: 10
});

"Uncaught TypeError: Cannot read property 'map' of undefined"（1321行）

查看了源码看到是：

    this.scaled_matrix = this.matrix.map(function (m) { return m.map(function (n) { return n * scale; }); });

其中matrix没有定义。
本人比较渣看不太懂源码，望指导，谢谢。:no_mouth:

希望给draw方法中的drawImage添加try...catch...

如题，当image的src并不存在时，会触发Uncaught DOMException（chrome），所以希望能够在drawImage上添加相应的try...catch...
PS：水平还不够，还需修炼方能提交PR -_-||

todo: layered refresh

Layered refresh is required.

todo: expand

Easy to expand.