wxDraw

Легкая библиотека анимации холста апплета

что

Canvas — важный элемент HTML 5. Он может эффективно рисовать графику, но это слишком низкоуровневый и грубый API, из-за чего разработчикам сложно использовать его для создания более сложной графики, а его мгновенное рисование не имеет функции памяти, что делает его внутренним. Графика не поддерживает анимацию и все события взаимодействия.

Эта проблема возникает на всех клиентах, поддерживающих холст, а также возникает вАпплет WeChatВ холсте в , так как апплет состоит изjscoreподдержка, нетоконный объект, а API холста такой же, как и стандартный API холста.несоответствие, поэтому большинство библиотек холста на рынкевне связи с этим.

иwxDrawОн также появился на свет, предназначенный для обработки небольших программ.canvasизГрафическое создание,Графическая анимацияа такжевзаимодействоватьсомнительный.

характеристика

ПростойВам не нужно знать холст, вы можете использовать wxDraw, если вы можете использовать jQuery.
гибкийВся графика может быть изменена, добавлена и уничтожена в любое время и в любом месте.
поддержка мероприятийСобытия, поддерживаемые апплетом, поддерживаются до тех пор, пока они допустимы.
Поддержка ослабления анимацииwxDraw поддерживает цепочку анимаций «точно так же, как анимация jQuery» и поддерживает почти все функции плавности. Графическое создание

Поддержка графики

Эти графики можно увидеть в демонстрационном файлекликните сюда

rect

 var rect = new Shape('rect', {x: 60, y: 60, w: 40, h: 40, fillStyle: "#2FB8AC", rotate: Math.PI/2 },'mix', true);

circle

 let circle = new Shape('circle', { x: 100, y: 100, r: 40, sA: Math.PI/4, 
                             fillStyle: "#C0D860",
                            strokeStyle: "#CC333F", rotate: 20, lineWidth: 0, needGra: 'line', 
                              gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]}, 
                           'fill', true)

polygon

let polygon = new Shape('polygon', { x: 200, y: 200, r: 40, sides: 9, //9边形
                          fillStyle: "#FC354C", rotate: Math.PI / 4 }, 'mix', true)

ellipse

    let ellipse = new Shape('ellipse', { x: 200, y: 200, a: 40, b: 100, 
                             fillStyle: "#00A0B0", rotate: Math.PI / 7 }, 'mix', true)

cshape "нестандартная форма"

  let cshape = new Shape('cshape', {
      rotate: Math.PI / 2,
      points: [[70, 85], [40, 20], [24, 46], [2, 4], [14, 6], [4, 46]],
      lineWidth: 5,
      fillStyle: "#00A0B0",
      rotate: Math.PI / 7,
      needGra: 'circle',
      smooth:false,
      gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]
    }, 'fill', true)

line


let line = new Shape('line', { points:[[240,373],[11,32],[28,423],[12,105],[203,41],[128,0.06]], 
               strokeStyle: "#2FB8AC",lineWidth:1, rotate: 0, needShadow: true,smooth:false },  
               'fill', true)

text

  let text = new Shape('text', { x: 200, y: 200, text: "我是测试文字", 
                      fillStyle: "#E6781E", rotate: Math.PI / 3}
                      'fill', true)